css动画

什么是css3中的动画：

• 使元素从一种样式逐渐变化为另一种样式
• 可以改变任意多的样式任意多的次数
• 可以用百分比规定变化发生的时间，或者用关键词“from”和“to”,等价于“0%”和“100%”，表示动画的开始和完成

通过css3我们可以创建动画，可以代替页面中的动画图片、Flash动画以及JavaScript。

如果创建css动画，需要了解@keyframes规则。

@keyframes规则用于创建动画，在其中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。

兼容性：

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实现：

在 @keyframes 中创建动画时，要将其捆绑到某个选择器，否则不会产生动画效果。

需要至少规定以下两项：

• 规定动画的名称
• 规定动画的时长

 例1：

例2：

css3动画属性：

例3：

    本例在 Internet Explorer 中无效。     
    

上栗简写：

    本例在 Internet Explorer 中无效。