CSS3中的动画使用详解

在了解css3中的动画之前，我们必须搞清楚一个问题：我们为什么要学习它，它能给我们带来什么好处。

这个问题换种说法，就是css3中使用动画的意义：

首先同样的动画效果我们用css3来实现要比用JS实现要简单的多，

最重要的是从性能方面看，使用css3中的动画实现的效果远远比我们利用JS进行DOM操作的性能要好。

当我们搞清楚这个问题，接下来看它的用法：

1.首先@keyframes 声明规则，下面举个栗子：

@keyframes  规则名 {

         0%{         状态1        }

        50%{         状态2       }

      100%{         状态3       }

}

在规则声明是，规则名字是我们自己定义的，后面要调用，规则状态可以是多步，取决于需要；

2.在我们要进行动画操作的元素中添加调用动画的属性

    animation：规则名      动画进行时长（一遍）    状态间切换方式     次数   循环方式；

栗子：animation： background 5s linear 2 alternate 

 

来解释一个animation这个属性后面的一对参数的作用和用法：

      首先要记住 要想让这个动画有效，必须具有 名字  和动画进行时长两个参数

状态切换方式  linear 连续切换，有渐变效果  step 直接从当前状态跳到下一个状态 可step（n）表示一次进行的步数

循环次数  可以写具体的值      infinite无数次

循环方式   normal默认没有循环  alternate正反循环 动画播放在第偶数次向前播放，第奇数次向反方向播放。