transition(動畫屬性)

CSS過渡（transition）是經過定義元素從起點的狀態到終點的狀態，在必定的時間區間內實現元素平滑過渡或變化的一種補間動畫機制。
transition的四個子屬性：

- transition-property
- transition-duration
- transition-timing-function 
- transition-delay

即經過transition你能夠決定哪一個屬性（property），什麼時候開始（delay），持續多久（duration）以及如何動畫（timing-function）

transition的簡寫：

例如

1. transition: background-color 3s linear 1s;
2. transition: width 2s ease-in 2000ms, border 2s linear, height 5s
3. transition: 4s ease-in-out

• 以transition-property的值列表長度爲標準，若是某個屬性值列表長度短於它，則重複值讓長度一致
• 如某個屬性值列表長於transition-property將被截短。

如何執行動畫效果

css3動畫通常經過鼠標事件或者鼠標狀態定義動畫，一般咱們能夠使用css中僞類、使用js修改元素的樣式屬性或追加刪除樣式來執行定義的動畫。CSS中僞類執行動畫：

動態僞類	起做用的元素	描述
:link	只有連接	未訪問的連接
:visited	只有連接	訪問過的連接
:hover	全部元素	鼠標通過元素
:active	全部元素	鼠標點擊元素
:focus	全部可被選中的元素	元素被選中

transitionend事件

transitionend事件會在css transition過渡完成時觸發。當transition完成前被移除或者取消。好比移除css的transition-property屬性，此事件將不被觸發。

Chrome	Firefox (Gecko)	IE	Opera	Safari (Webkit)
1.0開始 webkitTransitionEnd	4.0開始 transitionend	10開始 transitionend	10.5開始 oTransitionEnd 12開始 otransitionend 12.10開始 transitionend	3.2開始 webkitTransitionEnd

transition和animation的區別
1. transition完成後會保留過渡後的狀態，而animation會跳至默認狀態
2. 後者更精細，每一幀均可控。前者是平滑過渡