属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3
下面的两个例子设置了所有动画属性：
animation:myfirst 5s linear 2s infinite alternate;
1.animation-name 动画的名称 、
2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
4.animation-delay 规定动画何时开始。默认是 0。
5.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
复杂的写法：
div
{
100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
简写：
div
{
100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
1.animation-name 动画的名称 、
2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
4.animation-delay 规定动画何时开始。默认是 0。
5.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
/* Firefox: */ -moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */ -webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */ -o-animation:myfirst 5s linear 2s infinite alternate; }
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}