animation
属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 4s 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 如下示1 3
animation-delay 规定动画何时开始。默认是 0。 可以为负数，为跳过 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 为无限： infinite 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 反流播放：alternate 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 已停止：paused 3
animation-fill-mode 规定对象动画时间之外的状态。 如下示2 3
值 描述 测试
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
值 描述
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
动画名：myfirst，全写
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
@keyframes 创建规则
规定某项 CSS 样式，写法1： 注：可以按任一百分比（0%，25%，50%，75%，100%）
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
100% {background:blue; left:200px; top:200px;}
}
例：