CSS3動畫

transition屬性

一般是在hover,click,getFocus等事件發生時進行的動畫。創建簡單的過渡效果有下面幾步：

1. 寫明元素的初始狀態樣式
2. 寫出過度元素的最終狀態樣式，比如hover樣式
3. 在默認樣式中添加過渡函數，添加一些不同的樣式。
   transition是一個複合屬性，主要包括

屬性	含義
transition-property	指定過渡或動態模擬的CSS屬性
transition-duration	指定完成過渡需要的時間
transition-timing-function	指定過渡函數
transition-delay	指定開始出現的延遲時間

先看transition-property屬性。
具有過渡的CSS屬性如下：

transition-timing-function指的是動畫進行的曲線函數。主要有：

注意，可以簡寫如下，必須按照順序來：

transition: property duration timing-function delay

Keyframes設置動畫

關鍵幀

css3中語法如下（以顏色變化舉栗子）

@keyframes changeColor{
    0%{
        background:red;
    }
    100%{
        background:green;
    }
}

從上面可以看出，需要給這個關鍵幀組取一個名字，然後再通過animation:changeColor即可開始動畫。如果設置animation:none;就可以刪除動畫。

關鍵幀屬性

關於動畫的一些屬性，將之前的屬性中的transition換成animation即可。
不過animation增加了count屬性

animation-iteration-count:infinite;

即無限重複。也可設置爲整數

關鍵幀動畫方向

animation-direction:normal|alternate

屬性	含義
normal	每次播放都是向前播放
alternative	在偶數次向前播放，奇數次向後播放

播放狀態

animation-play-state:running|paused

屬性	含義
running	播放
paused	暫停

div:hover span {
  animation-play-state:running;
}

我覺得其實這個CSS比較有意思，因爲這個選擇器選擇的是hover過後的div內的span

設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作，主要有如下屬性。
爲了方便說明，假設有div 背景色爲black，而關鍵幀動畫是從紅到綠，且有延時1s。

屬性	含義
none	默認值，表示在最初的1s爲black，而後執行動畫，最後變爲黑色
forwards	表示動畫在結束後保持最後的關鍵幀。即最初1s爲黑色，而後執行動畫，最後保持綠色
backwards	最初1s爲紅色，然後由紅變綠，然後變黑
both	兼具forwards和backwards即起初類似backwards，最後保持綠色