animation的语法：
animation：<single-animation>[,<single-animation>]*
animation:属性名 过渡时间 过渡曲线 延迟时间 循环次数 循环方向 停止状态 开始还是结束
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
说明：
复合属性。检索或设置对象所应用的动画特效。
如果提供多组属性值，以逗号进行分隔。
注意：如果只提供一个<time>参数，则为 <‘ animation-duration ‘> 的值定义；如果提供二个<time>参数，则第一个为 <‘ animation-duration ‘> 的值定义，第二个为 <‘ animation-delay ‘> 的值定义
对应的脚本特性为animation。
取值：
<‘ animation-name ‘>：
检索或设置对象所应用的 动画名称
说明：
检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationName。
<‘ animation-duration ‘>：
检索或设置对象动画的 持续时间
说明：
检索或设置对象动画的持续时间
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationDuration。
<‘ animation-timing-function ‘>：
检索或设置对象动画的 过渡类型，值如下：
九个值：
linear：匀速。
ease：逐渐变慢。
ease-in：加速。
ease-out：减速
ease-in-out：先加速，后减速
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，
指定函数的步数。第二个参数取值可以是start或end，
指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
说明：
检索或设置对象动画的过渡类型
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationTimingFunction。
<‘ animation-delay ‘>：
检索或设置对象动画 延迟的时间
说明：
检索或设置对象动画的延迟时间
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationDelay。
<‘ animation-iteration-count ‘>：
检索或设置对象动画的 循环次数
infinite：无限循环
<number>：指定对象动画的具体循环次数
(iteration [?t?‘re??(?)n] 重复 )
说明：
检索或设置对象动画的循环次数
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationIterationCount。
<‘ animation-direction ‘>：
检索或设置对象动画在循环中 是否反向运动
取值：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
alternate [‘??lt?ne?t; ‘?l-] 交替；轮流 reverse [r?‘v??s] 颠倒；倒转
<‘ animation-fill-mode ‘>：
检索或设置对象动画时间之外的状态
取值：
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationFillMode。
<‘ animation-play-state ‘>：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，
因为动画的状态可以通过其它的方式实现，比如重设样式
取值：
running：运动
paused：暂停
检索或设置对象动画的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationPlayState。
========================
记得加前缀：
-webkit-
-moz-
-ms-
-o-
animation-name属性检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义如果提供多个属性值，以逗号进行分隔。
A、keyframename是animation-name属性的参数值，指定要绑定到选择器的关键帧的名称
B、infinite是animation-iteration-count属性的参数，表示无限循环
C、none是animation-name属性的默认值，当值为none时，将没有任何动画效果
D、forwards是animation-fill-mode属性的参数，表示设置对象状态为动画结束时的状态
A、 infinite是animation-iteration-count属性的参数，表示无限循环
B、forwards是animation-fill-mode属性的参数，表示设置对象状态为动画结束时的状态
C、animation-duration是用来指定元素播放动画所持续的时间长，取值<time>为数值，单位为s （秒）或者毫秒(ms)其，默认值为0
D、none是animation-name属性的默认值，当值为none时，将没有任何动画效果
animation-delay 属性定义动画什么时候开始，单位可以是秒（s）或毫秒（ms），允许负值，-2s使动画马上开始，但会跳过2s进入动画。
-webkit-animation-delay: -1s; 等待1秒，然后开始动画
-moz-animation-delay: -1s;
-ms-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
动画完成一个周期耗时为animation-duration的值，与animation-delay的值无关
-webkit-animation-iteration-count: infinite; 无限循环，跟 animation-delay:2s; 是没有关系的。在计算动画周期时，千万别加2s。
-webkit-animation-iteration-count: 2;
-moz-animation-iteration-count: 2;
-ms-animation-iteration-count: 2;
-o-animation-iteration-count: 2;
animation-iteration-count: 2;
-webkit-animation-iteration-count: infinite; 无限循环，跟 animation-delay:2s; 是没有关系的。在计算动画周期时，千万别加2s。
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
原文：https://www.cnblogs.com/Knowledge-is-infinite/p/10776484.html