css3 animation 动画

闲着没事儿研究了一下CSS3 animation。 看了看别人写的东西，可惜的是目前还是只能在Chrom下面使用。

本人的Firefox6 下无任何效果.

animation的语法也比较简单：

 #moonobt{ position:absolute; left:0; top:475px; height:50px; width:800px;

-webkit-animation-name :  mobt ;   /*  指定动画名称 */
-webkit-animation-duration :  30s ;   /* 指定动画运行时间 */
-webkit-animation-iteration-count :  infinite ; /* 运行次数 */
-webkit-animation-timing-function :  linear ;
}

@-webkit-keyframes mobt
  {
    from {  /* 关键帧设置 从 frome 到 to */
        -webkit-transform : rotate(0deg) ;
     }
    50%  {   /* 中间百分之几十在哪儿 什么状态 可以添加多个 */
        -webkit-transform : rotate(-180deg) ;
     }
    to  {   /* 一个周期的最终状态 */
        -webkit-transform : rotate(-360deg) ;
     }
}

 

 

 

 http://qsl.cn/ztm/kikx/animate/animatetest.html