css animation相关

[5Mi]

animation

-webkit-animation-name:'name';/*动画属性名，也就是某个keyframes定义的动画名*/
 -webkit-animation-duration: 10s;/*动画持续时间*/
 -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
 -webkit-animation-delay: 2s;/*动画延迟时间*/
 -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
 -webkit-animation-direction: alternate;/*定义动画方式 规定是否应该轮流反向播放动画。如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。*/

• animation-delay 动画延时

  属性定义动画何时开始。 animation-delay 值以秒或毫秒计。 提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

• animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。