animation属性
animation 最常⽤的⼏种属性有以下⼏种：
1. animation-name(动画名称)
animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。
2. animation-duration(动画执⾏⼀次所需时间)
animation-duration属性也是必须存在的，因为animation-duration的值默认是0，没有动画。
3. animation-delay(动画在开始前的延迟时间)
animation-delay的值可以是秒（s）或者是毫秒（ms），默认值是0，没有延迟。
4. animation-timing-function(动画以何种运⾏轨迹完成⼀个周期)
animation-timing-function，默认值是ease，表⽰动画以低速开始，然后加速，最后在结束前变慢。最常⽤的值有以下⼏个：
（1）linear：表⽰动画从头到尾的速度都是相同的。
（2）ease-in：表⽰动画以低速开始。
（3）ease-out：表⽰动画以低速结束。
（4）ease-in-out：表⽰动画以低速开始和结束。
5. animation-iteration-count(动画播放次数)
animation-iteration-count属性值有两种：
（1）直接写数字，⾃定义想要播放动画的次数。
（2）infinite：设置动画⽆线循环播放。
6. animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)
默认值为none，标⽰，不会在动画结束或者未开始时给元素添加样式
常⽤属性值为：
（1）forwards：表⽰动画结束后，元素直接接使⽤当前样式。
（2）backwards：表⽰在动画延迟时间元素使⽤关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse 时）
7. animation-direction(是否轮流反向播放动画)
默认值是normal，动画正常播放。如果动画只播放⼀次，则该属性⽆效。
常⽤的属性值为：
html animation属性
（1）reverse：表⽰动画反向播放。
（2）alternate：表⽰动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。
（3）alternate-reverse: ：表⽰动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。
animation属性在书写通常合并在⼀起，除⾮需要单独设置的属性值，animation属性的简写形式为：animation:code 2s 2s linear infinite alternate forwards;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。