關於動畫animation的設置，主要有兩部曲，它們分別是：
一、關鍵幀的設置
關鍵幀的設置，一定要加上各個浏覽器的前綴名方可使用。
1.百分比寫法
@keyframes 關鍵幀名{
時間的百分比{css設置}
}
2.from、to寫法
@keyframes 關鍵幀名{
from{初始的css樣式}
to{動畫結束的css樣式}
}
二、給選定的元素綁定關鍵幀
元素{
animation:關鍵幀名 動畫時間 延遲執行時間 運行次數 動畫模式 是否交替 動畫結束後停留位置;
}
1）關鍵幀名 animation-name:我們設置的關鍵幀名
2）動畫時間 animation-duration:單位為s/ms
3）延遲執行時間 animation-delay:單位為s/ms
4）運行次數 animation-iteration-count:infinite（無限次）/number;
5）動畫模式 animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out
ease 逐漸變慢
linear 勻速
ease-in 緩慢開始（加速）
ease-out 緩慢結束（減速）
ease-in-out 先加速後減速
6）是否交替 animation-direction:normal（默認）/reverse（反向）
7）動畫結束後停留位置 animation-fill-mode:none（默認）/forwards/backwards/both
none 默認值，不設動畫外的狀態（開始）
forwards 停留在結束狀態
backwards 停留在開始狀態
both 停留在開始或結束狀態（結束）
8）動畫運行/暫停 animation-play-state:running（默認）/paused（暫停）
注(ˉ(∞)ˉ) ：在animation的簡寫裡，是不可以設置該屬性的，所以必須通過該屬性的全寫進行設置。
轉載請注明出處，謝謝哒。。。。。。。