浅谈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代码部分：

<