簡單基礎概念如下：
1、轉換
1、什麼是轉換
改變元素在頁面中的大小，位置，角度和形狀的一種方式
2、轉換分類
1、2d轉換
使元素在x軸和y軸上發生變化效果
2、3d轉換
在2d轉換基礎上，增加 z軸的變化效果
3、轉換屬性
屬性：transform 取值：4、轉換原點1、none
預設值，不進行任何轉換
2、轉換函式
表示乙個或者多個轉換函式，如果是多個函式的話，中間以空格分開
屬性：transform-origin
預設情況下，原點是在整個元素的中心位置處
取值：數值/百分比/關鍵字
兩個值：表示 x軸 和 y軸的位置
三個值：表示 x軸 ，y軸 ，z軸的位置
1、2d位移
1、屬性 和 函式
屬性:transform
函式:translate(x) :元素在x軸上的位移距離，取值為正，向右移動，取值為負，向左移動
translate(x,y) :
x表示x軸位移距離
y表示y軸位移距離，取值為正，向下移動，取值為負，向上移動
translatex(x) :只改變元素在x軸上的位置
translatey(y) :只改變元素在y軸上的位置
取值：1、數值
2、百分比
2、2d縮放
1、作用
改變元素在頁面中的大小
2、屬性和函式
屬性：transform
函式：scale(value),如果只給乙個值，那麼x軸和y軸將等比縮放
scale(x,y):改變 x軸和y軸的縮放比例
scalex(x):只改變x軸的縮放比例
scaley(y):只改變y軸的縮放比例
取值：預設值 為1
縮小：0~1 之間的數值
放大：大於1的數值
3、2d旋轉
1、作用
改變元素在頁面中的角度
2、屬性 和 函式
屬性：transform
函式：rotate(ndeg)
n取值為正，則順時針旋轉
n取值為負，則逆時針旋轉
3、注意
1、轉換時，座標軸會一起進行轉換
2、轉換原點可以影響轉換效果
4、2d傾斜
1、作用
改變元素在頁面上的形狀
2、屬性 和 函式
屬性：transform
函式：skew(xdeg) : x軸傾斜指定角度
實際上時改變 y軸的傾斜角度
取值為正：逆時針
取值為負：順時針
skewx(xdeg) : 效果同上
skewy(ydeg) : y軸傾斜指定角度
實際上是改變 x軸的傾斜角度
取值為正：順時針
取值為負：逆時針
1、3d轉換
增加 z軸 轉換效果
2、屬性
屬性：perspective
作用：模擬 人眼睛到 3d投射元素的距離
注意：該屬性 需要加在 3d轉換元素的父元素上
相容性：
火狐：-moz-perspective:
chrome，safari:-webkit-perspective
opera:-o-perspective
3、3d旋轉
允許元素在 x軸，y軸，z軸上進行旋轉操作
屬性 和 函式
屬性:transform
函式：rotatex(xdeg):以x軸為中心軸進行元素的旋轉
rotatey(ydeg)
rotatez(zdeg)
rotate3d(x,y,z,ndeg)
x,y,z,如果取值為 0的話，說明該軸不參與旋轉
x,y,z,如果取值為 1的話，說明該軸是參與旋轉的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg)
改變元素在z軸上的位置
2、屬性 和 函式
屬性：transform
函式：translatez();
translate3d(x,y,z)
3、屬性 : transform-style
作用：規範當前元素的子元素如何去排列3d位置
取值：
1、flat
預設值，不保留子元素的3d位置
2、preserve-3d
保留子元素3d位置
使得css的屬性值在一段時間內平滑過渡
2、過渡的 4個要素(屬性)
1、指定過渡屬性
屬性：transition-property
作用：規定應用過渡效果的css屬性名稱
取值：1、none
2、all
3、property-name : 具體使用過渡效果的屬性名稱
可以設定過渡的屬性：
1、顏色屬性
2、取值為數值的屬性
3、轉換屬性
transform
4、漸變屬性
5、visibility 屬性
6、陰影屬性
例子:
div屬性：transition-duration
取值：以秒(s) 或 毫秒(ms) 作為單位的
預設值為0，即沒有過渡效果
例子:
div屬性：transition-timing-function
取值：1、ease : 預設值，慢速開始，快速變快，慢速結束
2、linear : 勻速
3、ease-in : 慢速開始，加速結束
4、ease-out: 快速開始，減速結束
5、ease-in-out:慢速開始和結束，中間先加後減
例子:
div屬性：transition-delay
取值：ms 或 s 作為單位的數值
3、觸發過渡效果
一般都是由使用者行為觸發
5、過渡屬性-過渡子屬性的簡寫模式
transition:property duration timing-function delay;
3、動畫
1、什麼是動畫
使元素從一種樣式逐漸變化為另一種樣式
其原理是通過 關鍵幀 控制動畫的每一步
注意：瀏覽器相容性
通過了瀏覽器字首解決相容性
-moz-
-webkit-
-o-2、使用動畫的步驟
1、宣告動畫
宣告動畫的名稱，並且指定關鍵幀的資訊
關鍵幀：
1、時間點
2、該時間點上的狀態(樣式)
2、使用動畫
通過動畫屬性，將動畫效果繫結到某個元素上
3、宣告動畫
語法
@keyframes 動畫名稱
... ...(1% ~ 99%)
100%
}
@-webkit-keyframes 動畫名稱
... ...(1% ~ 99%)
100%
}
@-moz-keyframes 動畫名稱
... ...(1% ~ 99%)
100%
}
設計摺疊面板：
使用css設計摺疊效果，沒使用js，使用過度屬性設計滑動效果，**如下：
設計CSS3動畫
在css3中，一般建立動畫需要使用animation實現，使用簡寫屬性，將動畫與div 元素繫結。animation可用於設定六個動畫屬性 transform 變形 transition 過渡 animation 動畫 一 transform 直接改變大小和位置，顯示改變的結構，沒有過渡和變形的時間...
css動畫 幀動畫
動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...
譯 CSS動畫 vs JS動畫
目前有兩個主流的方法在web上建立動畫 使用css或js。到底選擇哪種方法來實現動畫，完全取決於你的專案以及你想要達到的效果。tips 很多基礎的動畫都可以通過css或js來實現，但兩者的效果和時間會有差別。兩種方式各有千秋 如果你已經用了類似jquery的包含動畫函式的js框架，你會發現用它來控制...