CSS3 @keyframes 规则创建css3动画
可以用from或者to或者%
@keyframes myfirst{
}
@-moz-keyframes myfirst{ /* Firefox */
}
@-webkit-keyframes myfirst {/* Safari 和 Chrome */
}
@-o-keyframes myfirst{ /* Opera */
}
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
animation: name duration timing-function delay iteration-count direction;
name(animation-name) 需要绑定到选择器的 keyframe 名称
duration(animation-duration) 完成动画所花费的时间，以秒或毫秒计(默认值是 0，意味着没有动画效果。)
timing-function(animation-timing-function) 动画的速度曲线
|
linear |
动画从头到尾的速度是相同的。 |
|
|
ease |
默认。动画以低速开始，然后加快，在结束前变慢。 |
|
|
ease-in |
动画以低速开始。 |
|
|
ease-out |
动画以低速结束。 |
|
|
ease-in-out |
动画以低速开始和结束。 |
|
|
cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
|
Delay(animation-delay) 定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。
iteration-count(animation- iteration-count) 定义动画的播放次数
|
n |
定义动画播放次数的数值。 |
|
infinite |
规定动画应该无限次播放 |
Direction(animation- direction) 是否应该轮流反向播放动画。
|
normal |
默认值。动画应该正常播放。 |
|
alternate |
动画应该轮流反向播放。 |
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;
/* 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 和 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;
}