animation

@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

语法

animation: name duration timing-function delay iteration-count direction;

animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定动画何时开始。
animation-iteration-count	规定动画被播放的次数。
animation-direction	规定动画是否在下一周期逆向地播放。

animation-play-state	规定动画是否正在运行或暂停。
animation-fill-mode	规定对象动画时间之外的状态。