首先說一下transition支援的屬性型別（是型別哦，具體屬性還是自己去看這裡），這個到處都有，我複製貼上就行了。
color: 通過紅、綠、藍和透明度元件變換（每個數值處理）如：background-color,border-color,color,outline-color等css屬性；(下面的比較中，左邊永遠比右邊流暢的，而且比較的雙方是它們都能做同乙個效果，否則沒有對比的意義哦)length: 真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；
percentage:真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；
integer離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換為整數時發生 如：outline-offset,z-index等屬性；
number真實的（浮點型）數值，如：zoom,opacity,font-weight,等屬性；
transform list
rectangle:通過x, y, width 和 height**為數值）變換，如：crop
visibility: 離散步驟，在0到1數字範圍之內，0表示「隱藏」，1表示完全「顯示」,如：visibility
shadow: 作用於color, x, y 和 blur（模糊）屬性,如：text-shadow
gradient: 通過每次停止時的位置和顏色進行變化。它們必須有相同的型別（放射狀的或是線性的）和相同的停止數值以便執行動畫,如：background-image
paint server (svg): 只支援下面的情況：從gradient到gradient以及color到color，然後工作與上面類似
space-separated list of above:如果列表有相同的專案數值，則列表每一項按照上面的規則進行變化，否則無變化
a shorthand property: 如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化
引用自
這個比較是我做好demo後用肉眼看出來的，而且在ios、pc、mac、android中看，流暢度會有不同，但暫時未發現下列列表中右側比左側流暢的情況。
transform:translate()流暢於padding、margin
transform:scale()流暢於width、height(其實這兩個沒法比，因為transform:scale()是直接縮放，會拉伸元素的，但如果用的是乙個純色的div，倒是可以用。)
css3動畫的 消失 」」
今天做了一件特別丟人的事情，用css3寫乙個最基礎最簡單的動畫 元素從左上角開始，到200px 處轉換成圓形 到 400px 處轉換成方形 第一次寫的時候，我的 是這樣寫的 結果是每當這個動畫執行結束之後，這個div就會 消失 然後我就反覆的檢查我的 看一下是不是哪兒搞錯了，結果是看了一遍又一遍都沒...
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...
css3的動畫特效
2017 12 20 14 22 49 saucxs 首先複習一下animation動畫新增各種引數 close hover before close hover before animation屬性引數中，延遲引數是我們較為常用的一種引數。當動畫的物件為多個時，我們常常用延遲引數來形成動畫序列。如...