Css3可以实现动画，代替原来的Flash和JavaScript方案。
首先，使用 @keyframes定义一个动画，名称为testAnimation,代码如下，通过百分比设置不同的CSS样式，规定动画的变化。
@keyframes myanimation {
0% {background:red,top:0,left:0}
25% {background:green,top:0,left:200px}
50% {background:blue,top:200px;left:200px}
75% {background:yellow,top:200px;left:0}
100% {background:red;top:0;left:0}
}
然后，通过选取一个元素，设置动画，以div为例
div {
width: 100px;
heihgt: 50px;
position: absolute;
animation-name: myanimation; //动画名称
animation-duration: 5s; //动画持续时间
animation-timing-function: ease // 动画运动曲线函数
}
网友评论