1.animation-name:动画名称
2.@keyframes:动画定义,后面跟动画名称
3.animation-duration:动画持续时长,单位(s)
4.animation-delay:动画延时生效,单位(s);可为负值,当为负值时候,应解读为已播放n秒
如:-2s表示动画已播放2s,从2s后开始播放
5.animation-iteration-count:动画运行次数,参考值有:infinite(无限循环)
6.animation-direction:动画运行方向规则:参考值有:
① normal(正常播放,默认值),
② reverse (反向),
③ alternate (先正向,后反向,交替),
④ alternate-reverse(先反向,后正向,交替)
7.animation-timing-function:动画运行曲线,参考值有:
① ease :慢-快-慢
② linear :匀速运动
③ ease-in:慢进
④ ease-out:慢出
⑤ ease-in-out :慢进慢出
⑥ cubic-bezier(n,n,n,n):用贝塞尔函数自定义动画运行曲线
8.animation-fill-mode:动画填充模式:
① none :默认值,不应用任何样式
② forwards :应用动画最后一个关键帧的样式值
③ backwards:应用动画第一个关键帧的样式值,并在动画延迟期间保留该值。
④ both 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性
9.animation-play-state:动画运行或者暂停
① paused:暂停
② running:播放
10.animation:集合6种动画简写属性,顺序:动画名称,运行时长,运行曲线,延时,运行次数,运行方向规则
版权归原作者 凉生陌汐梦 所有, 如有侵权,请联系我们删除。