1、通過CSS3，也可以進行創建動畫了
2, CSS3的動畫需要遵循@keyframes規則
規定動畫的時長
規定動畫的名稱
語法：animation: name duration (完成時間)
timing-function （完成的方式）
iteration-count （完成的次數)
fill-mode（動畫不執行時的顯示）
play-state（詢問動畫執行或暫停）;
value值： linear（相同的速度）
N(次數)
norma（默認正常播放）
none（默認開始時的樣子）
ease （默認，先慢中間快後面慢）
infinite（無線循環）
reverse（反向播放）
ease-in(慢速開始)
forwards(to值得設置)
running（運行）
backwards(from值得設置)
ease-out（以慢速結束）
ease-in-out（全程慢速）
paused（暫停）
@keyframes name{
from{}
50%{}
to{}
}
參數一：綁定在keyframes上名稱【必須要】 animmation-name 指定要綁定到選擇器的關鍵幀名稱
參數二：完成動畫所需要的時間，s/ms【必須要】 annimation-duration 完成動畫所需要的時間 單位 s或 ms
參數三：動畫開始之前的延遲，s/ms 【若不寫默認爲0】 annimation-delay
參數四：動畫執行的次數【若不寫，默認1】 animation-interation-counnt
參數五：動畫的運動曲線 【若不寫，默認ease】
參數六：動畫是否輪流反向執行【若不寫，默認normal】
參數七：是否保留動畫結束之後的狀態【若不寫，默認不保留】
例子代碼:
yuan1{animation: zhuanba 3s 0s infinite linear alternate; }
@keyframes zhuanba{
from{
transform: rotate(0deg) scale(1);
background: wheat;
}
50%{
transform: rotate(180deg) scale(1.5);
background: yellow;
}
to{
transform: rotate(360deg) scale(1);
background: red;
}
}