CSS3动画

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;

}