<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite alternate; } @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> <p>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>
把上面的代码放置到w3里面测试：http://www.w3school.com.cn/tiy/t.asp?f=css3_animation3
通过测试可以发现，我这边的代码是省略了浏览器兼容问题，只是拿出了一个能作用到的例子来试验：
animation:myfirst 5s infinite alternate; 这一句话是最为重要的，就以这个分析
animation 定义的是这个是一个动画，命名这个动画叫做myfirst ， 定义整个完成周期为 5s ， infinite ，如果不加这个元素，这个动画就会完成 0%--100%就结束了， 如果我们需要永远的动下去，这个元素起到了循环的作用。alternate 让 这个动画进行反复与上个周期相反的走 -> 100% --0%
