大学资料-CSS3animation属性详解（一）

大学资料-CSS3animation属性详解（一）

1. animation-timing-function

animation-timing-function属性

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

语法

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out |step-start | step-end | steps([,[start | end]]?) |cubic-bezier(,,,);

参数说明

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的动画名称、动画持续时间和动画延迟创建动画

animation-iteration-count

animation-iteration-count属性

检索或设置对象动画的循环次数

语法

animation-iteration-count: infinite | ;

参数说明

为数字，其默认值为“1”；infinite为无限次数循环

编程练习

我们学了动画的知识，那么我们来一起完成一个旋转的太极图吧。

任务

创建一个div，用CSS控制其大小、边框、位置等，做成一个静态的圆形，一般为红色，一般为白色用div的伪元素绘制两个圆环并放置适合位置使其成为一个太极图案创建动画定义动画的重复属性，让其循环播放