CSS3 @keyframes规则
语法
@keyframes animationname {keyframes-selector{css-style}}
值 描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。
支持程度
目前浏览器都不支持@keyframes规则
Firefox支持替代的@-moz-keyframes规则
Opera支持替代的@-o-keyframes规则
Safari和Chrome支持替代的@-webkit-keyframes规则
案例
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
CSS3 animation
语法
animation:name duration timing-function delay iteration-count direction
值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数 n|infinite。
animation-direction 规定是否应该轮流反向播放动画 normal|alternate。
支持程度
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
案例
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
css3 animation-timing-function
语法
animation-timing-function: value;
值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
支持程度
Internet Explorer 10、Firefox 以及 Opera 支持 animation-timing-function 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-timing-function 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。
css3 animation-fill-mode
语法
animation-fill-mode : none | forwards | backwards | both;
值 描述
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
css3 animation-play-state
语法
animation-play-state: paused|running;
值 描述
paused 规定动画已暂停。
running 规定动画正在播放。