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


CSS3

簡介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:{
[<動畫名> || <動畫期間> || <動畫特效> || <動畫延遲> || <動畫次數> || <動畫方向>] ,
[<動畫名> || <動畫期間> || <動畫特效> || <動畫延遲> || <動畫次數> || <動畫方向>]
}


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC


看完有什麼想和版主講的,沒有就留個「閱」吧

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

  • miss wong

    請問若在html 5 (css style) 如下打:
    @keyframes slider {20% {left: -100%;}
    {45% {left: -200%;}
    {75% {left: -300%;}

    問題: 我不明白為何要打負數是否指slide由右到左的位置??
    我有5張slide, 由左行到右.

    謝謝賜教