[CSS3 Minefield] Transition

[本文的Demo請用webkit系的browser如chrome和safari最新版觀看]
前言
1. 偏見不是一天造成的
2. Safari和Chrome在CSS的部分幾乎一致，分野直至Mobile才出現
3. Vendor prefix = 小心被炸
碎碎念完畢，開始。

正文
CSS3 Transition是一種「不自己寫過沒感覺」和「很易被雷到」的東西

在說Implementation前說一下這是什麼東西。

所謂CSS3 Transition就是


「當Element有css屬性改變時所加插的過場效果」


至於作用則是美化、平滑轉換和拖一下時間 XD

[Browser Support]
支援方面因為定義在CSS3，所以只有新世代browser才有(old IE淚目)。不過因為時間關係所以本文只是以webkit作準 (mozilla文件不齊寫不了)

[原理]
CSS3 Transition的基本是在css屬性改變時自動生成中間的過場效果，如下圖第二格

background-color由red變成blue+位移

傳統的CSS之下，CSS的屬性改變接近即時－在沒有js去delay的情形下，你只會看見頭尾兩格 (紅、藍)。如果有CSS3 Transition則會有中間自動生成的過場效果 (紅漸變去紫，紫漸變去藍)
而過場時間和數值改變的方式(timing-function)可以用CSS去調整

[使用方法]
基本用法是預備兩個class和相應的CSS Rules
以上圖為例，假設Element為#box，紅色為.source，藍色為.destination，Transition定義在目的地的class(這次是.destination)的Rule裡
#box.source {
background-color: red;
left:0
}
#box.destination {
background-color:blue;
right:0;
-webkit-transition: all 5s linear;
}
[Demo]

如果是設定到.source的transition則把transition寫在.source裡

不過要注意的是，如果是直接寫在classless的#id上，在.destination沒有設定下會變成雙向  [Demo]
這個特性有時很方便，不過穩妥的做法是用class控制兩個方向的transition，因為...

改變的屬性(Target)如果沒有固定值 (非auto)作為預設值，會transit至0 (管你是img有width和height)，然後才彈回那個element的computed style的value....orz

不過看example就算預設值是固值也不敢省略，所以別那麼慳
(OT: webkit系的很多屬性也是沒有固值無法生效，尤其是overflow、min-width、min-height)

另外不少Target要Element有display:none以外的顯示屬性才看到


[Syntax]
語法如下，可以定義不同的css property用不同的時間 (逗號分隔)

-webkit-transition: property duration timing_function delay [, ...]

property
“-webkit-transition-property”: 生成transition的CSS屬性
all | none | css-property-name
*並非全部CSS property都支援，但-webkit-transform幾乎沒問題
duration
“-webkit-transition-duration”: 過場時間(s或ms)，預設是0...一定要寫啊!
value in second or ms, e.g. 2s , 2500ms (default:0)
timing_function
“-webkit-transition-timing-function”: 生成過場屬性數值的timing-function，預設是ease
ease  |  linear  |  ease-in |  ease-out 
|  ease-in-out | cubic-bezier()
效果詳見jQuery UI的easing demo
delay
“-webkit-transition-delay”: 過場效果Delay，用法和duration一樣的
same as duration

[Full Reference]

OT: Mozilla Firefox的可以用-moz-transition，大同小異

總結
基本上只要搞清方向、CSS Rules設好屬性和時間、知道Rule套在哪邊就不會被雷...

[Cheatsheet]
{legend} underline: transition defined on this side [有transition定義了的]; bold: transition definition on effect [生效的transition]; arrow(→): transition direction [transition發生的方向]
transition set in classless #id
source (#id) ↔ destination (#id.dest)

transition set in destination but not classless #id
source (#id) → destination (#id.dest)

transition set in both side
to destination
source (#id) → destination (#id.dest)
to source
source (#id) ← destination (#id.dest)

[延伸閱讀]
WWDC 2010 session 503, CSS Effect I
WWDC 2010 session 504, CSS Effect II
(Slide, Video & Code)
All you need to know about CSS Transitions //Transition property、redraw等advance topic