animation属性
2019-07-11 本文已影响0人
奋斗的小小小兔子
animation
-
animation-name自定义，对应keyframes名称
-
animation-duration动画耗时，单位：秒/毫秒
-
animation-timing-function动画的速度曲线
| 值 | 含义 |
|---|---|
linear |
匀速变化的动画 |
ease |
慢入，加速，慢出 |
ease-in |
慢入 |
ease-out |
慢出 |
ease-in-out |
慢入，慢出 |
-
animation-delay动画开始前等待的时间，单位：秒/毫秒，可以为负值，默认为0
animation-delay 为正数的时候，就是动画要延迟开始，animation-time 都还没有开始计算，正数的 delay 不会被计算到 animation-time 中，我们看到的动画就是从第一帧开始的；animation-delay 为负数的时候，意味着动画是提前开始的，animation-time 已经开始计算了，负数的 delay 是被算入 animation-time 中的，所以我们看到的动画是从某一帧开始的。
-
animation-iteration-count动画播放次数
|值|含义|
|-----|-----|
|n|动画播放2次|
|infinite|动画无限播放| -
animation-direction是否反向播放动画，如果动画只设置一次，则该属性无效。
| 值 | 含义 |
|---|---|
normal |
默认值，动画正常播放 |
alternate |
动画轮流反向播放 |
-
animation-fill-mode动画执行之前和执行之后的样式
| 值 | 含义 |
|---|---|
none |
默认值 |
forwards |
动画执行之后保持最后一帧样式 |
backwards |
动画执行之前保持第一帧样式 |
both |
动画执行之前保持第一帧样式， 动画执行之后保持最后一帧样式 |
animation-delay 负值以及 delay 正值在 iOS 上的坑
animation-play-state
| 值 | 含义 |
|---|---|
running |
动画运行 |
paused |
暂停动画 |
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
