CSS3 @keyframes 规则

通过CSS3，我们可以创建动画，而不必再使用JavaScript，此篇文章分享@keyframes规则，其实掌握了就会觉得它是如此的简单。这里讲一下transform与@keyframes动画的区别：transform只执行一次，而@keyframes动画是循环的。

我们先来看一个小例子：

<h4>Hello World</h4>

h4{
    animation: color 2s infinite alternate; /*名字 时间 无限循环 轮流反向播放*/
}
@keyframes color{
    from{
        color:#f00;
    }
    to{
        color: #0f0;
    }
}

这个效果就是红色和绿色颜色渐变切换，我们来分析一下上面的代码：

首先写好要动画的元素，然后@keyframes来创建动画，后面跟着动画名字，from里面放的是动画开始（0%）的样式，to里面放的是动画结束（100%）的样式，然后把动画绑定到选择器，这里有几个选项下面依次来介绍：

 

• animation-name：规定 @keyframes 动画的名称
• animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0
• animation-timing-function：规定动画的速度曲线。默认是 "ease"
• animation-delay：规定动画何时开始。默认是 0
• animation-iteration-count：规定动画被播放的次数。默认是 1
• animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"
• animation-play-state：规定动画是否正在运行或暂停。默认是 "running"
• animation-fill-mode：规定对象动画时间之外的状态

 

而我上面写的 animation: color 2s infinite alternate; 是简写形式：

h4{
    animation: color 2s infinite alternate;
}
/* 相当于 */
h4{
    animation-name: color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

 

下面我们来看一个箭头上下移动的例子（结合transform）：

<span class="box"><i class="arrow"></i></span>

.arrow{
    display: inline-block;
    width:20px;
    height:20px;
    border-left:2px #f60 solid;
    border-bottom:2px #f60 solid;
    transform: rotate(-45deg);
}
.box{
    display: inline-block;
    animation: triangle 2s infinite; /* 名字，时长，循环执行的次数 */
}
@keyframes triangle{
    0%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, 10px);
    }
    100%{
        transform: translate(0, 0);
    }
}

 还要注意一点transform是css3的属性，前面要加前缀，诸如-o-、-moz-等，@keyframes也是。