animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-duration 动画需要多少秒或者毫秒完成
可以为1000ms
也可以为1s
animation-timing-function 动画如何完成一个周期
linear
:动画从头到尾的速度是相同
ease
:低速-加快-结束前变慢
ease-in
:动画以低速开始
ease-out
:动画以快速开始
ease-in-out
:动画以低速开始和结束
animation-delay 设置动画在启动前的延迟间隔
animation-delay:2s;
:2秒之后再开始动画
animation-iteration-count 定义动画的播放次数
infinite
无限次播放 或者直接写数字 (1,2,3)
animation-direction 指定是否应该轮流反向播放动画
normal
:默认值,正常播放。
reverse
:动画反向播放。
alternate
:动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
alternate-reverse
:动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
initial
:设置该属性为它的默认值。
inherit
:从父元素继承该属性
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
none
:默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
forwards
:在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
backwards
:动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。
both
:动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
initial
:设置该属性为它的默认值。
inherit
: 从父元素继承该属性。
animation-play-state 指定动画是否正在运行或已暂停。
paused
:暂停动画
running
:指定正在运行的动画