|
一、變形transform：可以對元素對象進(jìn)行旋轉(zhuǎn)rotate、縮放scale、移動translate、傾斜skew、矩陣變形matrix。
示例： 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屬性名 過度效果時長 速度效果的速度曲線 過度效果開始時間； 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()：二維空間旋轉(zhuǎn)元素。 若元素設(shè)置了perspective值，可用rotate3d()實現(xiàn)三維空間內(nèi)旋轉(zhuǎn)。 rotateX(angele)/*相當(dāng)于rotate3d(1,0,0,angle)指定在三維空間內(nèi)的X軸旋轉(zhuǎn)*/
rotateY(angele)/*相當(dāng)于rotate3d(0,1,0,angle)指定在三維空間內(nèi)的Y軸旋轉(zhuǎn)*/
rotateZ(angele)/*相當(dāng)于rotate3d(0,0,1,angle)指定在三維空間內(nèi)的Z軸旋轉(zhuǎn)*/
scale() scaleX(<number>)/*只在X軸（水平方向）縮放元素*/
scaleY(<number>)/*只在Y軸（垂直方向）縮放*/
scaleZ(<number>)/*只在Z軸縮放，前提：元素設(shè)定透視值*/
translate([,])：移動,是位移量。 translateX(<translation-value>);/*只在X軸（水平方向）移動*/
translateY(<translation-value>);/*只在Y軸（垂直方向）移動*/
translateZ(<translation-value>);/*只在Z軸移動，前提：元素設(shè)置透視值*/
skew()：傾斜 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軸移動 transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);
perspective()：透視 .wrap{
perspective:1000px;
}
.wrap .child{
transform:perspective(1000px);
}
二、過渡transition-property：過度的屬性 transition-property:all;/*針對所有元素都有過度效果*/
transition-property:none;/*沒有元素有過度效果*/
transition-property:ident;/*指定css屬性有過度效果，例如width*/
transition-duration：過度時間
transition-delay：延遲時間，為負(fù)數(shù)時，過度動作會從該時間點開始顯示，之前的動作會被截斷。
transition-timing-function：過度效果，默認(rèn)ease。 transition-timing-function:ease;/*緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)，既立方貝塞爾*/
transition-timing-function:linear;/*線性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函數(shù)*/
transition-timing-function:ease-in;/*漸顯效果，等同于cubic-bezier(0.42,0,1.0,1.0)函數(shù)*/
transition-timing-function:ease-out;/*漸隱效果，等同于cubic-bezier(0,0,0.58,1.0)函數(shù)*/
transition-timing-function:ease-in-out;/*漸顯漸隱效果，等同于cubic-bezier(0.42,0,0.58,1.0)函數(shù)*/
transition-timing-function:cubic-bezier;/*特殊的立方貝塞爾曲線效果*/
三、動畫animation-name：動畫名稱，必須與規(guī)則@keyframes配合使用，因為動畫名稱由@keyframes定義，如果提供多個屬性值用逗號隔開。 @keyframes相當(dāng)于一個命名空間，后面跟一個名詞，如果在class中的animation-name定義了與之對應(yīng)的name就可以執(zhí)行動畫。定義動畫時可直接使用關(guān)鍵字from和to，從一種狀態(tài)過度到另一種狀態(tài)。 .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)函數(shù)，既立方貝塞爾。
linear：線性效果
ease-in：漸顯效果
ease-out：漸隱效果
ease-in-out：漸顯漸隱效果
step-start：馬上跳轉(zhuǎn)到動畫結(jié)束狀態(tài)
step-end：保持動畫開始狀態(tài)，到動畫執(zhí)行時間結(jié)束，馬上跳轉(zhuǎn)到動畫結(jié)束狀態(tài)
step([,[start | end]]?)：第一個參數(shù)number為指定的間隔數(shù)，即把動畫分為n步階段性顯示，第二個參數(shù)默認(rèn)為end，設(shè)置最后一步狀態(tài)，start為結(jié)束時的狀態(tài)，end為開始時的狀態(tài)，若設(shè)置與animation-fill-mode的效果沖突，以animation-fill-mode的設(shè)置為動畫結(jié)束狀態(tài)。
cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果 animation-delay：開始播放時間 animation-iteration-count：播放次數(shù)，取值為infinite時表示無限循環(huán)播放 animation-direction：播放方向，取值為： normal：正常方向
reverse：動畫反向運行，方向始終與normal相仿
alternate：動畫會循環(huán)正反交替運動 animation-fill-mode：播放后的狀態(tài)，取值： none：默認(rèn)值，不設(shè)置
forwards：結(jié)束后保持動畫結(jié)束的狀態(tài)
backwards：結(jié)束后返回動畫開始時狀態(tài)
both：結(jié)束后可遵循forwards和backwards兩個規(guī)則
animation-play-state：檢索或設(shè)置對象動畫的狀態(tài)，取值：
running：默認(rèn)，運動
paused：暫停 四、關(guān)聯(lián)屬性transform-origin：變形原點，transform的參照點，默認(rèn)為元素的中心點。有兩個參數(shù)，參數(shù)一為橫坐標(biāo)，參數(shù)二為縱坐標(biāo)。 percentage：用百分比指定坐標(biāo)值，可負(fù)
length：用長度指定坐標(biāo)值，可負(fù)
left center right：水平方向取值
top center bottom：垂直方向取值 perspective-prigin：透視原點，定義在X軸和Y軸的3D元素，允許改變3D元素的底部位置，定義該屬性時，它是一個元素的子元素，透視圖，而不是元素本身。
注意：使用該屬性必須和perspective屬性一起用，只影響3D轉(zhuǎn)換的元素。
取值：percentage、length、left、center、right、top、center、bottom backface-visibility：隱藏內(nèi)容的背面，默認(rèn)情況下背面可見，反轉(zhuǎn)后變換的內(nèi)容仍然可見，當(dāng)backface-visibility設(shè)置hidden時，旋轉(zhuǎn)后內(nèi)容將隱藏，旋轉(zhuǎn)后正面將不再可見。
取值：visible、hidden
transform-style：3D呈現(xiàn)，設(shè)置內(nèi)嵌的元素在3D空間如何呈現(xiàn)，有兩個值：
flat：所有子元素在2D平面呈現(xiàn)
preserve-3d：保留3D空間
|
