css3动画

CSS3 @keyframes 规则

1、@keyframes规则是创建动画。

2、@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

举例：

1、@keyframes myfirst

2、@-webkit-keyframes myfirst /* Safari and Chrome */

3、@-moz-keyframes myfirst /* Firefox */

4、@-o-keyframes myfirst /* Opera */

1、当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

2、指定至少这两个CSS3的动画属性绑定向一个选择器：

（1）规定动画的名称

（2）规定动画的时长

3、动画是使元素从一种样式逐渐变化为另一种样式的效果。

4、注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.

---

1、@keyframes animationname {keyframes-selector {css-styles;}}

（1）animationname必需的。定义animation的名称。

（2）keyframes-selector必需的。动画持续时间的百分比。

（3）css-styles必需的。一个或多个合法的CSS样式属性   

2、CSS3 animation（动画） 属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

（1）animation-name 指定要绑定到选择器的关键帧的名称

（2）animation-duration 动画指定需要多少秒或毫秒完成

（3）animation-timing-function 设置动画将如何完成一个周期         【 infinite】

1、 linear动画从开始到结束具有相同的速度。

2、 ease动画有一个缓慢的开始，然后快，结束慢。

3、 ease-in动画有一个缓慢的开始。

4、 ease-out动画结束缓慢。

5、 ease-in-out动画具有缓慢的开始和慢的结束。

（4）animation-delay设置动画在启动前的延迟间隔。

（5）animation-iteration-count 定义动画的播放次数

1、infinite指定动画应该播放无限次（永远）

2.n

（6）animation-direction 指定是否应该轮流反向播放动画

1\normal以正常的方式播放动画

2、reverse以相反方向播放动画

3、alternate播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等...）

4、alternate-reverse在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画

（7）animation- fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

1、none默认值。无样式

2、forwards动画结束后，使用元素的结束属性值。

3、backwards使用元素的起始值。

4、both动画将遵循向前和向后的规则。

（8）animation-play-state指定动画是否正在运行或已暂停。