css3 动画化制作animation标签总结与实践

在上一篇transfrom的博客（地址http://t.csdn.cn/gHV77）中我已经讲了动画化的基础标签transfrom，现在来继续上一个按钮的基础上实现动画化的标签animation。我们这儿想要达到的效果是实现这个按钮的颜色穿梭变换而保证内部不变的一个效果。

我们先来复习以下基本语法:

animation-name:动画名称

animation-duration: 每一个周期（每一次）动画持续时间，单位s

animation-timing-function:动画速度曲线

animation-delay:动画好久开始播放，默认是0，若为负数则提前播放，单位s

animation-iteration-count:动画播放次数，默认为1，一般都设为无限次infinite

animation-direction:动画是否逆向播放，默认值为normal。此外还有reverse，alternate，alternate-reverse三种主要属性，reverse实现一直反向播放，alternate实现在奇数次正向播放，偶数次反向播放，alternate-reverse实现在奇数次反向播放，偶数次正向播放。

animation要搭配“@keyframes 动画名称”来使用，一般我们有

@keyframes 名称 { from {} to {} }（从头到位的变换）

@keyframes 名称{ 0% { } 100% { } }（对每次动画进行到具体的百分比进程设置）

两种