a

循环一次，2个色

@keyframes a{ from {background:red;} to {background:yellow;} }

b

循环三次，4个色

animation-iteration-count:3;

c

无限循环，4个色

animation-iteration-count:infinite;

d

动画高速开始

animation-timing-function:linear;

e

动画3S后开始

animation-delay:3s;

f

动画播放完后倒会播放

animation-direction:alternate;

g

默认暂停,鼠标放上开始动

animation-play-state:paused;

h

animation-fill-mode:forwards

动画运行2次完成后，回到结束时的状态

i

animation-fill-mode:backwards;

动画运行2次完成后，回到开始时的状态

j

animation-fill-mode:both；的状态和animation-direction的值（是否逆向播放）以及animation-iteration-count的值有关（播放次数）；animation-direction的值为alternate；播放次数为2那么其最后回带到开始状态，如果播放次数为3，那么最后回到结束状态

animation简写

animation:【自定义属性】【完成一个周期需要的秒数】【动画速度曲线】【 播放次数】【是否逆向播放】【动画停止时的状态】【默认是否暂停

animation:【animation-name】【animation-duration】【animation-timing-function】 【animation-delay】【animation-iteration-count】【animation-direction 】【animation-fill-mode】【animation-play-state】

实例

animation:ceshi 5s ease-in 2 alternate both;

-webkit-animation:ceshi 5s ease-in 2 alternate both;/* Safari 和 Chrome */

@keyframes ceshi { from {left:0px;} to {left:200px;} }
@-webkit-keyframes ceshi /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }

running是默认值，所以animation-play-state的值可不写

各属性值

animation-name（动画名称）

自定义即可

animation-duration(完成一个周期所花费的秒或毫秒)

3s;200ms等默认值是0

animation-timing-function:

linear动画从头到尾的速度是相同的
ease 默认动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
cubic-bezier(n,n,n,n) cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值;cubic-bezier.com ;点击在线编辑cubic-bezier 函数

animation-delay规定动画何时开始

2s。默认是 0

animation-iteration-count 规定动画被播放的次数

3 ;。默认是 1

animation-direction规定动画是否在下一周期逆向地播放

默认是 "normal"
alternate 动画轮流反向播放。

animation-play-state 规定动画是否正在运行或暂停

paused暂停。默认是 "running"。

animation-fill-mode:规定对象动画时间之外的状态;

默认值为none
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both向前和向后填充模式都被应用。