css怎麼讓div動起來，實現動畫效果一直在動
阿新 • • 發佈：2019-01-22
<!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%