animation属性 animation-name 指定@keyframes描述动画关键帧的规则名称。 animation-duration 配置动画完成一个周期所需的时间。 animation-timing-function 配置动画的时间；也就是说，通过建立加速曲线，动画如何在关键帧之间过渡。 animation-delay 配置元素加载时间与动画序列开始之间的延迟。 animation-iteration-count 配置动画应重复的次数；您可以指定infinite无限期重复动画。 animation-direction 配置动画在序列中每次运行时是否应交替显示方向或重置为起点并重复自身。 animation-fill-mode 配置动画在执行之前和之后应用的值。 animation-play-state 使您可以暂停和恢复动画序列。
animation-name 指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
/* Single animation */ animation-name: none;/test_05;/-specific;/sliding-vertically; /* Multiple animations */ animation-name: test1, animation4;/none, -moz-specific, sliding; /* Global values */ animation-name: initial/inherit/unset值 none 特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。 IDENT 标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。
animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定 初始值: normal 适用元素: all elements, ::before and ::after pseudo-elements 是否是继承属性: 否 计算值: as specified Animation type: discrete 语法
animation-direction:normal/reverse/alternate/alternate-reverse/ normal, reverse/alternate, reverse, normal值 normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 reverse 反向运行动画，每周期结束动画由尾到头运行。 alternate-reverse 反向交替， 反向开始交替 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-timing-function 设置如何动画通过每个周期的持续时间进步 句法
/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* Steps Function keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* Multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset; <timing-function>对应于给定动画的计时功能，由确定animation-name。 非步进关键字值（缓动，线性，缓入等）分别表示具有固定四个点值的三次Bézier曲线，三次方bezier（）函数值允许使用非预定值。步进计时功能将输入时间分为长度相等的指定间隔数。它由多个步骤和步骤位置定义。 ease 等于cubic-bezier(0.25, 0.1, 0.25, 1.0)，即默认值，其朝向动画中间的速度增加，最后逐渐减慢。 linear 等于cubic-bezier(0.0, 0.0, 1.0, 1.0)，动画速度均匀。 ease-in 等于cubic-bezier(0.42, 0, 1.0, 1.0)，开始缓慢，随着动画设置过渡的速度增加直到完成。 ease-out 等于cubic-bezier(0, 0, 0.58, 1.0)，开始快速，放慢动画的速度继续。• ease-in-out 等于cubic-bezier(0.42, 0, 0.58, 1.0)，动画属性缓慢过渡，加速，然后再次减速。 cubic-bezier(p1, p2, p3, p4) 作者定义了三次贝塞尔曲线，其中p1和p3值必须在0到1的范围内。 steps(n, ) 显示沿过渡沿n个停靠点的动画迭代，并在相等的时间内显示每个停靠点。例如，如果n为5，则有5个步骤。动画是暂时保持 在20％，40％，60％，80％和100％的0％，20％，40％，60％和80％， 还是在0％和100％之间保持5个停顿动画， 或制作5个停靠点，包括0％和100％标记（在0％，25％，50％，75％和100％上），取决于所使用的以下跳转项： jump-start 表示左连续函数，以便在动画开始时发生第一跳； jump-end 表示一个右连续函数，以便在动画结束时发生最后一次跳转； jump-none 两端均无跳跃。而是同时保持0％和100％标记，每个持续时间均为1 / n。 jump-both 包括在0％和100％标记处的暂停，从而在动画迭代期间有效地增加了一步。 start 与相同jump-start。 end 与相同jump-end。 step-start 等于 steps(1, jump-start) step-end 等于 steps(1, jump-end)
animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。 语法
/* Single animation */ animation-fill-mode: none/ forwards/backwards/both; /* Multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;值 none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 forwards 目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值： animation-direction animation-iteration-count last keyframe encountered normal even or odd 100% or to reverse even or odd 0% or from alternate even 0% or from alternate odd 100% or to alternate-reverse even 100% or to alternate-reverse odd 0% or from backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值： animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 注意：当您在animation-*属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 animation-name 属性中指定的动画。 有关更多信息，请参阅设置多个动画属性值。
animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。 0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。 如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。 初始值: 0s 适用元素: all elements, ::before and ::after pseudo-elements 是否是继承属性 : 否 计算值: as specified Animation type: discrete 语法 animation-delay: 3s; animation-delay: 2s, 4ms; 值 <time> 从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。
整理自MDN
