animation属性是众属性简写
1.animation-name : 动画关键帧名称
none
特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
IDENT
标识动画的字符串，由大小写不敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。默认值 none
2.animation-duration: 制定一个动画周期的时长 默认值为0
一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s。
3.animation-timing-function: 属性定义CSS动画在每一动画周期中执行的节奏。
属性大致跟transition-timing-function使用方法相同，
steps()
steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
例如：steps(3, start)
steps() 第一个参数将动画分割成三段。当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1
- steps(3， end)
当指定跃点为 end，动画则在每个计时周期的终点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（3s），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3
image.png
4.animation-delay
属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；
定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。
5.animation-iteration-count
属性定义动画在结束前运行的次数 可以是1次 无限循环.
默认播放动画循环一次.
6.animation-direction
属性指示动画是否反向播放，它通常在简写属性中设定
默认值：normal
normal
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse
反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
反向交替， 反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
7.animation-fill-mode
属性用来指定在动画执行之前和之后如何给动画的目标应用样式。
none
动画执行前后不改变任何样式
forwards:
目标保持动画最后一帧的样式，最后一帧是哪个取决于animation-direction
和 animation-iteration-count
backwards:
目标保持动画第一帧的样式，
both
动画将会执行 forwards 和 backwards 执行的动作。
8.animation-play-state:
控制动画是否播放或暂停running paused
网友评论