好程式設計師web前端系列之css3動畫

好程式設計師 web前端系列之 動畫 ， CSS3屬性中有關於製作動畫的三個屬性：
transform,transition,animation

keyframes

@keyframes mymove{ from{初始狀態屬性}
to{結束狀態屬性}
}
或
@keyframes mymove{
0%{初始狀態屬性}
100%{結束狀態屬性}
}（中間再可以新增關鍵幀）

animation和transition的區別

相同點： 都是隨著時間改變元素的屬性值。 不同點： transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性； 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值。

animation

animation複合屬性。檢索或設定物件所應用的動畫特效。

1.animation-name  檢索或設定物件所應用的動畫名稱

說明： 必須與規則 @keyframes配合使用，eg:@keyframes mymove{}  animation-name:mymove

2.animation-duration  檢索或設定物件動畫的持續時間

說明： animation-duration:3s;    動畫完成使用的時間為3s

3.animation-timing-function  檢索或設定物件動畫的過渡型別

說明：  linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
 ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
 ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
 ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
 ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

4.animation-delay  檢索或設定物件動畫延遲的時間

說明： animation-delay:0.5s;     動畫開始前延遲的時間為0.5s)

5.animation-iteration-count  檢索或設定物件動畫的迴圈次數

說明： animation-iteration-count: infinite | number;
infinite：無限迴圈
number: 迴圈的次數

6.animation-direction  檢索或設定物件動畫在迴圈中是否反向運動

說明： normal：正常方向
reverse：反方向執行
alternate：動畫先正常執行再反方向執行，並持續交替執行
alternate-reverse：動畫先反執行再正方向執行，並持續交替執行

7.animation-play-state  檢索或設定物件動畫的狀態

說明：  animation-play-state:running | paused;
 running:運動
 paused: 暫停
 animation-play-state:paused;       當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行

例項