CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果。通过设置可以对某一元素改变任意多的样式任意多的次数。通常用百分比来规定变化发生的时间,或者用关键词 "from" 和 "to",等同于 0% 和 100%(0% 是动画的开始,100% 是动画的完成)为了得到最佳的浏览器支持,我们在定义动画的时候应该始终定义 0% 和 100% 选择器,并且应该定义动画的名称和时长,若忽略时长(默认值是零),则动画不被允许播放。
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation。在本文章中将对Animation的用法作一简单的阐述。
小了解:在使用Animation之前,有必要了解一下keyframes规则。keyframes就是Flash中的“关键帧”,@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
下面是关于浏览器兼容的情况 (图片来源于W3Cschool)
- 实例(一)
HTML代码部分:
<