animation属性

animation

1. animation-name自定义，对应keyframes名称

2. animation-duration动画耗时，单位：秒/毫秒

3. animation-timing-function动画的速度曲线

值	含义
linear	匀速变化的动画
ease	慢入，加速，慢出
ease-in	慢入
ease-out	慢出
ease-in-out	慢入，慢出

查看示例

4. animation-delay动画开始前等待的时间，单位：秒/毫秒，可以为负值，默认为0

animation-delay 为正数的时候，就是动画要延迟开始，animation-time 都还没有开始计算，正数的 delay 不会被计算到 animation-time 中，我们看到的动画就是从第一帧开始的；animation-delay 为负数的时候，意味着动画是提前开始的，animation-time 已经开始计算了，负数的 delay 是被算入 animation-time 中的，所以我们看到的动画是从某一帧开始的。

查看示例

5. animation-iteration-count动画播放次数
   |值|含义|
   |-----|-----|
   |n|动画播放2次|
   |infinite|动画无限播放|

6. animation-direction是否反向播放动画，如果动画只设置一次，则该属性无效。

值	含义
normal	默认值，动画正常播放
alternate	动画轮流反向播放

7. animation-fill-mode动画执行之前和执行之后的样式

值	含义
none	默认值
forwards	动画执行之后保持最后一帧样式
backwards	动画执行之前保持第一帧样式
both	动画执行之前保持第一帧样式， 动画执行之后保持最后一帧样式

查看示例

animation-delay 负值以及 delay 正值在 iOS 上的坑

8. animation-play-state

值	含义
running	动画运行
paused	暂停动画

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

查看示例