css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過、單擊、獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值過渡屬性需要觸發事件，如：hover（滑鼠劃過事件）。
其中，transtion可以細分為四部分功能。
1. transition-duration：檢索或設定物件過渡的持續時間
設定過渡時間（單位：s, ms），即元素改變持續的時間。
我們通過hover（滑鼠劃過事件）觸發對元素的改變是一瞬間完成的，而通過該屬性，我們可以將元素改變的時間延長，這就能構成一種簡單的動畫效果。可以說是transtion裡最重要的功能，也是後面與transform搭配構成動畫效果的重要屬性。
2. transition-property：檢索或設定物件中的參與過渡的屬性
我們可以通過乙個例子來說明他的作用。
"box">
200px*200px，背景為紅色的div元素，滑鼠滑過使div的寬高變為400px。實踐時，我們會看到元素的寬高的變化會持續2s，而我們給div初始效果**裡新增transition-property: width；就會看到僅僅元素寬的變化持續2s，而高的變化是一瞬間完成的，即元素參與過渡的僅為元素的寬。
其屬性值除了可以單獨設定某個屬性，也可以設定多個屬性width，height；還可以設定為all（預設值），代表所有屬性。
3. transition-delay：檢索或設定物件延遲過渡的時間
設定延遲過渡的時間（s, ms），即觸發事件到元素開始變化的時間。其屬性值可以為正，也可以為負，為正值的時候是延遲執行過渡效果，為負值的時候是提前只想過渡效果。
4. transition-timing-function：檢索或設定物件中過渡的動畫型別
在實踐過程中，我們可以發現元素不是勻速變形的，而是逐漸慢下來，這就是transition-timing-function預設值ease的效果，我們也可以設定為以下屬性值：
linear 勻速
ease（預設值） 逐漸慢下來
ease-in 加速
ease-out 減速
ease-in-out 先加速後減速
5. 複合式寫法
transition
:all 2s 1s linear ;
transition
: 2s linear 1s all ;
注：哪個元素發生變形，就把過渡屬性新增給誰；建議寫給元素初始的效果裡。
css動畫和過渡
translate x,y 定義 2d 轉換，沿著 x 和 y 軸移動元素。translatex n 定義 2d 轉換，沿著 x 軸移動元素。translatey n 定義 2d 轉換，沿著 y 軸移動元素。scale x,y 定義 2d 縮放轉換，改變元素的寬度和高度。scalex n 定義 2d...
css動畫之過渡
過渡屬性為transition，是屬於css3的屬性，所以在處理不同瀏覽器的相容性問題時，記得加上私有字首。如下 transition表示的是哪些屬性執行動畫所需要的時間 transform是應用於元素的2d或者3d轉換，其中屬性值有rotate表示的是旋轉多少度，translate表示的是在x和y...
css 動畫過渡效果
transition 要過渡的屬性 花費時間 遠動曲線 何時開始 簡寫 transition property 要過渡的屬性名稱 transition duration 定義過渡花費的時間 預設是0 transition timing function 過渡效果的時間曲線 預設是 ease line...