CSS3 动画 animation和@keyframes

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
/*注：下面的写法将不再写 -webkit- 和 -moz- */

或者用%表示时间段

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

注意：当您在 @keyframes 中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

实例

把 "myfirst" 动画捆绑到 div 元素，时长：3 秒：

div{
animation: myfirst 3s;
}

其中animation有6个属性

• animation-name  规定 @keyframes 动画的名称
• animation-duration  规定动画完成一个周期所花费的秒或毫秒。默认是 0
• animation-timing-function  规定动画的速度曲线。默认是 "ease" 。  4个属性：ease、ease-in、ease-out、ease-in-out
• animation-delay  规定动画何时开始。默认是 0
• animation-iteration-count  规定动画被播放的次数。默认是 1。   2个属性：n(次数，不填写即为1)和infinite（无限次）
• animation-direction  规定动画是否在下一周期逆向地播放。默认是 "normal"。   2个属性：normal（正常循环播放，可不填）和alternate（结束后轮流反向播放）

所有属性可以合起来写

div {
animation: myfirst 5s linear 1s infinite alternate;
/*动画名称、动画时间5s、动画速度:匀速、延迟开始时间：1s、动画播放次数：无限次、动画完成后下一周期：轮流反向播放。*/
}