CSS3動畫

CSS3動畫

1、animation動畫屬性

animation-name: 取值是動畫的名字;
animation-duration: ;動畫完成的之間
animation-timing-function: ; 定義動畫完成的方式
animation-delay: ;動畫的延遲時間
animation-iteration-count: ;動畫執行的次數 （infinite是無限迴圈的意思）
animation-direction: ;規定動畫執行的方向
alternate 屬性值是規定動畫來回執行
animation-state: ;規定動畫是否執行預設值running ， 當它為pause的時候便是暫停
animation-fill-mode: ;規定動畫開始之前和結束之後發生的操作，預設值為none；forwards表示動畫結束後元素保留最後幀的狀態，backwords則與forwards相反
animation-play-state: running; !*動畫的開始結束

2、@keyframes

規定一個動畫，包括動畫名稱
from規定了動畫的初始狀態
to規定動畫的末狀態
0%也可以表示動畫初始狀態
100%表示動畫的末狀態
比較傾向後者，因為後者可以表示中間的斷點的狀態