闲着没事儿研究了一下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);
}
}
-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);
}
}
