CSS3animation属性详解（一）

最新推荐文章于 2024-05-06 19:28:55 发布

「已注销」

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量6.3k

点赞数

分类专栏：前端文章标签： css css3 html animation js

本文链接：https://blog.csdn.net/qq_43133192/article/details/104861394

版权

前端专栏收录该内容

46 篇文章 2 订阅

订阅专栏

CSS3animation属性详解（一）

1. animation-timing-function

animation-timing-function属性

检索或设置对象动画的过渡属性

语法

参数说明

linear：线性过渡。等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
ease：平滑过渡。等同于贝塞尔曲线（0.25，0.1，1.25，1.0）
ease-in：由慢到快。等同于贝塞尔曲线（0.42，0.0，1.0，1.0）
ease-out：由快到慢。等同于贝塞尔曲线（0.0，0.0，0.58，1.0）
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线（0.42，0.0，0.58，1.0）

2. animation-delay

animation-delay属性

检索或设置对象动画的延迟时间

语法

animation-delay: time;

参数说明

可选。定义动画开始前等待时间，以秒或毫秒计。默认值为0

编程练习

如今有一些页面元素会在网页加载完成之后以一个绚丽的飞入效果博得浏览者的眼球，比如一个温馨提示框在网页加载之后2s左右从上方飞下来。那么我们也来尝试一下吧。

任务

创建一个div，用CSS控制其大小、边框、字体、位置等
设置div的动画名称、动画持续时间和动画延迟
创建动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3animation属性详解（一）</title>
		<style type="text/css">
			div{
				font-family: "微软雅黑";
				font-size: 60px;
				font-weight: bold;
				line-height: 600px;
				position: absolute;
				top: -1000px;
				right: 0;
				left: 0;
				width: 800px;
				height: 600px;
				margin: auto;
				text-align: center;
				border: 5px solid #000000;
				border-radius: 50%;
				animation-name: disp;
				animation-duration: 3s;
				animation-timing-function: ease-in-out;
				animation-delay: 2s;
				animation-fill-mode: forwards;
			}
			@keyframes disp{
				from{top: -600px;}
				to{top: 75px;}
			}
		</style>
	</head>
	<body>
		<div>大家好！</div>
	</body>
</html>

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3animation属性详解（一）

CSS3animation属性详解（一）1. animation-timing-functionanimation-timing-function属性检索或设置对象动画的过渡属性语法animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out |step-start | step-end | s...
复制链接

扫一扫

专栏目录