一、變形
transform：可以對元素物件進行旋轉rotate、縮放scale、移動translate、傾斜skew、矩陣變形matrix。
示例：
|
1 2 3 4 5 |
transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩陣變形*/ matrix(<number>,<number>,<number>,<number>,<number>,<number>); /*透視*/ perspective(length); |
transition：過度屬性
transition：過度效果的css屬性名 過度效果時長 速度效果的速度曲線 過度效果開始時間；
|
1 2 3 4 5 6 |
transition: property duration timing-function delay; /*示例*/ transition:1s ease all; -webkit-tansition:1s ease all; -moz-transition:1s ease all; -o-transition:1s ease all; |
rotate()：二維空間旋轉元素。
若元素設定了perspective值，可用rotate3d()實現三維空間內旋轉。
|
1 2 3 |
rotateX(angele)/*相當於rotate3d(1,0,0,angle)指定在三維空間內的X軸旋轉*/ rotateY(angele)/*相當於rotate3d(0,1,0,angle)指定在三維空間內的Y軸旋轉*/ rotateZ(angele)/*相當於rotate3d(0,0,1,angle)指定在三維空間內的Z軸旋轉*/ |
scale()
|
1 2 3 |
scaleX(<number>)/*只在X軸（水平方向）縮放元素*/ scaleY(<number>)/*只在Y軸（垂直方向）縮放*/ scaleZ(<number>)/*只在Z軸縮放，前提：元素設定透視值*/ |
translate([,])：移動,是位移量。
|
1 2 3 |
translateX(<translation-value>);/*只在X軸（水平方向）移動*/ translateY(<translation-value>);/*只在Y軸（垂直方向）移動*/ translateZ(<translation-value>);/*只在Z軸移動，前提：元素設定透視值*/ |
skew()：傾斜
|
1 2 |
skewX(<angle>);/*只在X軸（水平）傾斜*/ skewY(<angle>);/*只在Y軸（垂直）傾斜*/ |
matrix(a,c,e,b,d,f)：矩陣變形，c、e的值用正弦或餘弦值表示。
a：表示scaleX(); X軸縮放
c：skewY(); Y軸傾斜
e：skewX(); X軸傾斜
b：scaleY(); Y軸縮放
d：translateX() X軸移動
f：translateY() Y軸移動
|
1 |
transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>); |
perspective()：透視
|
1 2 3 4 5 6 |
.wrap{ perspective:1000px; } .wrap .child{ transform:perspective(1000px); } |
二、過渡
transition-property：過度的屬性
|
1 2 3 |
transition-property:all;/*針對所有元素都有過度效果*/ transition-property:none;/*沒有元素有過度效果*/ transition-property:ident;/*指定css屬性有過度效果，例如width*/ |
transition-duration：過度時間
transition-delay：延遲時間，為負數時，過度動作會從該時間點開始顯示，之前的動作會被截斷。
transition-timing-function：過度效果，預設ease。
|
1 2 3 4 5 6 |
transition-timing-function:ease;/*緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函式，既立方貝塞爾*/ transition-timing-function:linear;/*線性效果，等同於cubic-bezier(0.0,0.0,1.0,1.0)函式*/ transition-timing-function:ease-in;/*漸顯效果，等同於cubic-bezier(0.42,0,1.0,1.0)函式*/ transition-timing-function:ease-out;/*漸隱效果，等同於cubic-bezier(0,0,0.58,1.0)函式*/ transition-timing-function:ease-in-out;/*漸顯漸隱效果，等同於cubic-bezier(0.42,0,0.58,1.0)函式*/ transition-timing-function:cubic-bezier;/*特殊的立方貝塞爾曲線效果*/ |
三、動畫
animation-name：動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義，如果提供多個屬性值用逗號隔開。
@keyframes相當於一個名稱空間，後面跟一個名詞，如果在class中的animation-name定義了與之對應的name就可以執行動畫。定義動畫時可直接使用關鍵字from和to，從一種狀態過度到另一種狀態。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.animation_name{ left:0; top:100px; position: absolute; -webkit-animation: 0.5s 0.5s ease infinite alternate; -moz-animation: 0.5s 0.5s ease infinite alternate; -webkit-animation-name:demo; -moz-animation-name:demo; } @-webkit-keyframes demo{ from{left:0;} to{left:400px;} } @-webkit-keyframes demo1{ 0%{left:0;} 50%{left:200px;} 100%{left:400px;} } |
animation-duration：動畫時間
animation-timing-function：播放方式，取值如下：
ease：緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函式，既立方貝塞爾。
linear：線性效果
ease-in：漸顯效果
ease-out：漸隱效果
ease-in-out：漸顯漸隱效果
step-start：馬上跳轉到動畫結束狀態
step-end：保持動畫開始狀態，到動畫執行時間結束，馬上跳轉到動畫結束狀態
step([,[start | end]]?)：第一個引數number為指定的間隔數，即把動畫分為n步階段性顯示，第二個引數預設為end，設定最後一步狀態，start為結束時的狀態，end為開始時的狀態，若設定與animation-fill-mode的效果衝突，以animation-fill-mode的設定為動畫結束狀態。
cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果
animation-delay：開始播放時間
animation-iteration-count：播放次數，取值為infinite時表示無限迴圈播放
animation-direction：播放方向，取值為：
normal：正常方向
reverse：動畫反向執行，方向始終與normal相仿
alternate：動畫會迴圈正反交替運動
animation-fill-mode：播放後的狀態，取值：
none：預設值，不設定
forwards：結束後保持動畫結束的狀態
backwards：結束後返回動畫開始時狀態
both：結束後可遵循forwards和backwards兩個規則
animation-play-state：檢索或設定物件動畫的狀態，取值：
running：預設，運動
paused：暫停
四、關聯屬性
transform-origin：變形原點，transform的參照點，預設為元素的中心點。有兩個引數，引數一為橫座標，引數二為縱座標。
percentage：用百分比指定座標值，可負
length：用長度指定座標值，可負
left center right：水平方向取值
top center bottom：垂直方向取值
perspective-prigin：透視原點，定義在X軸和Y軸的3D元素，允許改變3D元素的底部位置，定義該屬性時，它是一個元素的子元素，透檢視，而不是元素本身。
注意：使用該屬性必須和perspective屬性一起用，隻影響3D轉換的元素。
取值：percentage、length、left、center、right、top、center、bottom
backface-visibility：隱藏內容的背面，預設情況下背面可見，反轉後變換的內容仍然可見，當backface-visibility設定hidden時，旋轉後內容將隱藏，旋轉後正面將不再可見。
取值：visible、hidden
transform-style：3D呈現，設定內嵌的元素在3D空間如何呈現，有兩個值：
flat：所有子元素在2D平面呈現
preserve-3d：保留3D空間