CSS3 @keyframes 规则

CSS3 @keyframes 规则的语法是：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname：定义动画的名称。

keyframes-selector：动画时长的百分比。具有一个合法值：0-100%：0％是开头动画，100％是当动画完成。

from（与 0% 相同）、to（与 100% 相同）。

css-styles：一个或多个合法的 CSS 样式属性。

目前浏览器都不支持 @keyframes 规则。Firefox 兼容需要加-moz-： @-moz-keyframes 规则。

在动画元素中加入animation:run-right 10s linear infinite;

@keyframes run-right {
    100%{
        transform: rotateY(-360deg);/*向左旋转360度*/

         }  }

完整的一个css变换例子：

    
    




        

本例在 Internet Explorer 中无效。