css3里有一个@keyframes规则 使用它可以创建一个简单的动画
创建动画的原理是将一套css样式逐渐变化成另一套样式
以百分比%来规定改变发生的时间 或使用from和to 等价于0% 100%
0%是动画开始的时间100%动画结束的时间 应该始终定义0%和100%
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>
上面这个例子会变换位置并改变颜色
在动画完成时它会回到原来的样子 位置
目前浏览器不支持@keyframes 规则
需要在你使用的浏览器前加标示
火狐
@-moz-keyframes
Safari 和 Chrome @-webkit-keyframes
Opera @-o-keyframes myfirst