浅谈CSS3动画效果【Animation】

CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果。通过设置可以对某一元素改变任意多的样式任意多的次数。通常用百分比来规定变化发生的时间，或者用关键词 "from" 和 "to"，等同于 0% 和 100%（0% 是动画的开始，100% 是动画的完成）为了得到最佳的浏览器支持，我们在定义动画的时候应该始终定义 0% 和 100% 选择器，并且应该定义动画的名称和时长，若忽略时长（默认值是零），则动画不被允许播放。

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。在本文章中将对Animation的用法作一简单的阐述。

小了解：在使用Animation之前，有必要了解一下keyframes规则。keyframes就是Flash中的“关键帧”，@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

下面是关于浏览器兼容的情况 （图片来源于W3Cschool）

• 实例（一）

 HTML代码部分：

样式代码部分：

演示效果：（如图所示，小正方形的颜色发生了变化）

解释说明：

• 实例（二）

小了解：在动画中，若表示元素的动画变换状态，“0%”与“100%”一定要加上“%”，如果没有加上的话，设置的keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。

 HTML代码部分：

样式代码部分：

演示效果：

解释说明（图片来源于W3Cschool）：

1. animation-name  用来定义一个动画的名称，其主要有两个值—>自定义动画名、none；
2. animation-duration  是用来设定元素播放动画所持续的时间长，取值为【time】数值；
3. animation-timing-function 指元素根据时间的推进来改变属性值的变换速率，是动画的播放方式；主要取值方式如图所示
4. animation-delay  用来明确元素动画开始时间，取值为 【time】为数值；
5. animation-iteration-count  用来表示动画播放循环的次数，取值为【number】数字，infinite为无限次数循环；
6. animation-direction 用来指定元素动画播放的方向；
7. animation-play-state 用来控制元素动画的播放状态；

 

部分内容来源于网站：

http://www.w3cplus.com/content/css3-animation    

http://www.w3school.com                                                                                                             

                                                                                                                                                               元气少女，加油！