iT邦幫忙

DAY 28
3

新手前端日記系列 第 28

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

簡介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為準,可以用負數。

偷懶丟外國神人早就做好的範例
animation-timing-function參數:
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

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

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

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

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


chibc's blog | [新手前端]CSS3動畫效果 transition, animation


上一篇
[新手前端] 你還在點[網際網路]上網嗎? 快把IE換掉吧!!
下一篇
[新手前端]SEO搜尋引擎優化及 SNS社群網路服務
系列文
新手前端日記30

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-11-05 23:07:50

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

果真神人啊 .....

哭哭哭

chibc iT邦新手 3 級‧ 2012-11-06 10:09:12 檢舉

其實認真的話應該自己做個範例啦... 我今天就有點想拿喬巴實做動畫效果
不過,真的做了的話應該是炫技的成份比較多 XD

我要留言

立即登入留言