keyframes創建動畫的好處？

@keyframes 語法規則在動畫過程中，可以多次更改CSS樣式。指定的變化發生時使用％，或關鍵字"from"和"to"，這和0％到100％相同。0％是開頭動畫，100％是當動畫完成。為了獲得最佳的瀏覽器支持，應該始終定義為0％和100％的選擇器。

@keyframes就是個動畫，可以理解成多個transform組成的一個組。語法：@keyframes 動畫名 { from{ css1} to{ css2 } }

@keyframes 動畫名{0% {css1}50% {css2}100% {css3}}注：使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。

二、animation屬性值

當調用這個動畫時用animation ，animation由六個屬性組成：

animation-name 指定要綁定到選擇器的關鍵幀的名稱animation-duration 動畫指定需要多少秒或毫秒完成animation-timing-function 設置動畫將如何完成一個周期animation-delay 設置動畫在啟動前的延遲間隔animation-iteration-count 定義動畫的播放次數animation-direction 指定是否應該輪流反向播放動畫animation : 動畫名 時間 速度曲線 開始的時候延遲 播放次數 輪流反向播放 舉個例子看看：

讓正方形從左上角向右上角再向右下角到左下角最后回到左上角，并且顏色也會隨之變化

CSS3中使用@keyframes創建動畫，實例講解代碼塊

div{animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

}

@keyframes mymove

{

0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

75% {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

75% {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}

}