[新手前端]CSS3動畫效果 transition, animation 2

簡介CSS3 裡的動畫效果，其實… 是W3C的文件精簡翻譯版
另附神人範例說明。

CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的 期間、重覆及重覆的模式例如重覆次數、起始延遲、暫時停止。

支援度，標準化進行中。現行的瀏覽器都支援包括IE10，但還是要加上prefix。

CSS3發佈的 transitions提供了參數可以製作簡單的動畫效果。其動畫效果是由起始參數及結束時的參數所決定。transitions 只是提供設計師一個可以指定中間過度動畫的方法。

animation和transitions最大的不同在於，tansitions是當參數改變時觸發，而animation則是直接就執行，所以動畫效果需要明確的指定關鍵影格的參數。

單純的漸變只需要開始及結束時的CSS參數，針對動作的指定只有時間還有次數，一旦需要特別指定中間變換的方式時，就需要使用到 keyframes關鍵影格 (有沒有覺得，像在學Flash啊 XDDD)
@keyframes 的表示法，槽狀的{} 直接定意不同百分比之間的參數。

keyframe 選擇器的樣式是用一連串由 , 區分的 % 數值決定 keyframe由哪裡到哪裡 from to
選擇器用來定義以時間為準的 % 進行到哪個點時該呈現什麼動作。

keyframe 本身是由選擇器宣告一個特定的名字”keyframes-name”
from 表示動畫的開始的狀態 = 0% , to 表示動畫結束的狀態 = 100%。
因為動畫的期間只能用百分比表示，所以不能只有0，要輸入 0%

定義keyframe可以不按順序，但是keyframe內的參數一定至少要有 0% 及100%的定義。一般是直接使用 from to。如果一個keyframe定義沒有完整的序述，整個keyframe是無效的，會被忽視。

基本上動畫會隨著keyframe內設定的參數不停的動作，除非有針對動畫設定 animation-timing-function
因為keyframes的解讀是在解析的最後，因為此@keyframes的規則不會被繼承，所以一個keyframe只能被一個動畫執行。

定義keyframes時要從0%開始依續定義到100%，如果有重覆的，後面的參數會把前面蓋掉。

DEMO1
@keyframes 'animaiton-name'{
0% {left: 100px;}
40% {left: 150px;}
60% {left: 75px;}
100% {left: 100px;}
}

文法
@keyframes ‘關鍵影格名字’ {
from {位置:距離; 動畫轉場特效:淡出;}
50% {位置:距離;}
to {位置:距離;}
}

DEMO2
@keyframes 'bounce' {
from {top: 100px; animation-timing-function: ease-out;}
25% {top: 50px;animation-timing-function: ease-in;}
50% {top: 100px;animation-timing-function: ease-out;}
75% {top: 75px;animation-timing-function: ease-in;}
to {top: 100px;}
}

DEMO3
div {
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
}

@keyframes 'diagonal-slide' {
from {left: 0;top: 0;}
to {left: 100px;top: 100px;}
}

元素的CSS樣式在動畫執行的時候會被動畫設定的內容取代，直到整個動畫結束為止
動畫一般在文件被載入時即執行，或是用偽類元素如hover觸發，另一種控制方法是使用js控制樣式，當元素取得指定的 animation name 時即開始執行動畫，直到該參數被移除為止。

animation-name 動畫名
動畫名是一個CSS樣式，用來為HTML元素設定一個專用動畫動作，如果沒有用一個 @keyframes ‘動畫名參數'{} 來指定這個動畫的關鍵影格動作時，整個動畫都不會執行(不知道怎麼動怎麼執行, 你知道… 電腦很笨的….)
這裡可以用 animation-name: none; 來覆寫元素繼承自父代的動畫。

animation-duration 動畫期間
預設是0 單位是 s秒，也就是設定該動畫將會花多久的時間跑完。

animation-timing-function 動畫轉場特效
轉場特效的指定是跟著動畫影格的，也就是要在 @keyframes {裡面的時間節點裡設定}，只會套用在那個節點的轉場特效上。
預設是 ease 不過這個動作實在很難解釋，用看的吧…
簡單的說，ease就是直接漸，那些in, out, 或是一起來的指的就是在進來或是出去時速度變慢，ease-in就是慢進，ease-out就是慢出，ease-in-out就是中間快前後慢啦~~ linear就是都很慢…

cubic-bezier 就是完全自定，速率是以1為準，可以用負數。

偷懶丟外國神人早就做好的範例

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

animation-iteration-count 動畫次數
就是要跑幾次，如果放了非整數，動畫會跑一半就停下來，預設是1。如果用了infinite 就會不停重覆。不播放時的數值是 zero。

animation-direction 動畫方向
決定動畫會不會倒帶，預設是normal 如果設定了 alternate動畫就會在偶數次播放時倒帶回原處。

animation-delay 動畫延遲
就是停一下再播放，以秒計費。

動畫名也可以縮寫，以 animation: 為屬性，將以動畫名為首的6種參數用空格區分都縮寫，然後用”,” 分隔下一組動畫的設定。
順序是
animation:{
[<動畫名> || <動畫期間> || <動畫特效> || <動畫延遲> || <動畫次數> || <動畫方向>] ,
[<動畫名> || <動畫期間> || <動畫特效> || <動畫延遲> || <動畫次數> || <動畫方向>]
}