transition(屬性漸變): “CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration”

過渡——Transition在W3C的描述：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動重點內容畫效果改變CSS的屬性值。

-webkit-transition：CSS屬性(none|all|屬性) 持續時間 時間函式 延遲時間

CSS屬性(transition-property)

持續時間(transition-duration) 動畫執行的時間，以秒為單位，比如0.1秒可以寫成”0.1s”或者”.1s”，注意後面有個“s”單位。

時間函式(transition-timing-function)： ease：逐漸慢下來 linear：線性過度 ease-in：由慢到快 ease-out：由快到慢 ease-in-out：由慢到快在到慢 cubic-bezier：特定的cubic-bezier曲線,所有值需在[0, 1]區域內，否則無效。

延遲時間(transition-delay) 在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。

例:讓所有的元素的屬性變化在1秒內平滑的過渡

* {
  -webkit-transition: all 1s;
}

hover狀態下或單擊click按鈕後box產生屬性變化

#timings-demo:hover .box {  
    background: #636;   
    -webkit-transition: all 2s ease-out 0s;  
}

定義CSS3動畫的位置:CSS偽類和JS事件

• :link 未訪問的連結
• :visited 訪問過的連結
• :hover 滑鼠懸停
• :active 滑鼠點選
• :focus 元素選中