css3 animation (动画) 属性

animation 属性速成

---

animation 属性有8个属性值

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

值	说明
animation-name	动画名称
animation-duration	动画总时长
animation-timing-function	设置动画速度
animation-delay	设置动画延时
animation-iteration-count	设置动画播放次数
animation-direction	是否轮流反向播放动画
animation-fill-mode	当动画不播放时（动画完成或动画有延时为播放时），要应用这个样式
animation-play-state	指定动画运行或暂停

animation-name

---

每个动画都会自定义一个动画名称，在使用的地方可以调用
默认值 none

animation-duration

---

动画完成一个周期时长
默认值为 0

animation-timing-function

---

使用数学函数，称为三次贝塞尔曲线，速度曲线。
可以使用自己的值，也可以使用预定义的值之一

值	描述
linear	动画匀速播放
ease	默认，动画低速开始，然后加快，结束前变慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	动画以低速开始和结束
steps(int,start|end)	暂时不会
cublic-bazzier(n,n,n,n)	暂时不会

---

连接可以在线观看效果

https://www.runoob.com/try/try.php?filename=trycss3_animation-timing-function2
https://www.runoob.com/try/try.php?filename=trycss3_animation-timing-function3

animation-delay

---

动画延长多少时间开始
默认值 0 单位秒（s）或毫秒（ms）
可以是负值，例如 -2s，跳过两秒动画

animation-iteration-count

---

定义动画播放次数
默认值为1
可选参数为自定义次数，或者 infinite （无限次数）

animation-direction

---

定义是否循环反复播放动画
注意：动画被定义播放一次，该属性将不起作用
默认值：normal

值	描述
normal	默认值，动画正常播放
reverse	动画反向播放
alternate	动画在基数次（1,3,5）正向播放，在偶数次（2，4，6），反向播放
alternate-reverse	动画在基数次（1,3,5）反向播放，在偶数次（2，4，6），正向播放

animation-fill-mode

---

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

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state

---

定义动画运行或暂停
可选值：running | paused
默认值：running