css3 animation 动画

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

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

转载自： http://www.cnblogs.com/trance/archive/2011/08/23/2151102.html