CSS3過渡動畫transition詳解

CSS3過渡動畫transition詳解

transition是指過渡動畫，讓css屬性的變化是可連續的、可控時間的、可控變化曲線的做出改變，無論是鼠標事件還是點擊事件，只要設置的CSS屬性發生改變，transition就能讓元素在設置的時間內平滑的發生改變。

transition又包含了四個子屬性，分別爲property、duration、timing-function、delay。下面來一一介紹，在最後會給出一個簡單的實例和使用方法說明。

transition-property變化的值，例如：{transition-property:opacity}，如果不用單獨定義不同的變化時間或曲線，可以直接寫爲all。

transition-duration變化的時間。可以精確到小數點後一位，單位s（秒）。例如：{transition-duration:0.3s}。

transition-timing-function變化曲線，簡單理解就是變化的快慢設置。下面有詳解。

transition-delay設置變化的起始值，簡單理解就是如果設置了transition-delay爲0.1秒，變化會從0.1秒開始發生，默認爲0。

transition合併的寫法，例如{transition:opacity 0.5s ease 0s}，還可以一次寫多個屬性變化，例如{transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;}，爲了方便，也可以寫成{transition:all 0.5s ease}

1 2 3 4 5 6 7 8 9

.trans {           -webkit-transition-property: background-color;指定過渡的性質           -webkit-transition-duration: 0.3s;指定這個過渡的持續時間           -webkit-transition-timing-function: ease;指定過渡類型       }       .trans:hover {           background-color: #486AAA;           color: #fff;       }

接下來詳細看看transition-timing-function的值，ease,ease-on,ease-out,ease-in-out,還有自定義變化曲線的cubic-bezier(number,number,number,number)，cubic-bezier是指貝塞爾曲線，估計很多看到這個都很頭疼，這裏簡單說明下。

ease
相當於 cubic-bezier(0.25, 0.1, 0.25, 1.0).簡單說就是平均變化，速度一樣。

ease-in
相當於 cubic-bezier(0.42, 0, 1.0, 1.0).先慢後快的變化，好像是猛踩油門然後換換剎車。

ease-out
相當於 cubic-bezier(0, 0, 0.58, 1.0).和ease-out相反，先快後慢的變化。

ease-in-out
相當於 cubic-bezier(0.42, 0, 0.58, 1.0).啓動慢中間快收尾慢的變化，好像是老師傅開老爺車，要慢慢加速，慢慢剎車。

linear
相當於 cubic-bezier(0.0, 0.0, 1.0, 1.0).和ease-in-out相反，啓動和收尾快，中間慢。

cubic-bezier
自定義一個 cubic-bezier 曲線. 根據需要定義 (x1, y1, x2, y2) 的數值. 所有數值要在 [0, 1] 範圍內。如果不是要用transition完成一個很複雜的動畫，基本上不會用到自定義的情況，搞清楚上面5種，已經能讓你用起來得心應手了！