網(wǎng)友解答: transition　　css3的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地

transition

　　css3的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值

　　transition-property：檢索或設(shè)置對象中的參與過渡的屬性

　　transition-duration：檢索或設(shè)置對象過渡的持續(xù)時(shí)間

　　transition-delay：檢索或設(shè)置對象延遲過渡的時(shí)間

　　transition-timing-function：檢索或設(shè)置對象中過渡的動(dòng)畫類型

　　簡寫：

　　transition:all/具體屬性值 運(yùn)動(dòng)時(shí)間s/ms 延遲時(shí)間s/ms 動(dòng)畫類型

　　transition-timing-function：檢索或設(shè)置對象中過渡的動(dòng)畫類型

　　貝塞爾曲線：

　　屬性值：cubic-bezier()貝塞爾曲線網(wǎng)址：http://cubic-bezier.com/逐幀動(dòng)畫：transition-timing-function:steps(動(dòng)畫執(zhí)行的步數(shù));

　　CSS3 2D

　　transform

　　transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey()

　　1、translate()

　　將元素向指定的方向移動(dòng)，類似于position中的relative。

　　水平移動(dòng)：向右移動(dòng)translate(tx,0)和向左移動(dòng)translate(-tx,0);

　　垂直移動(dòng)：向上移動(dòng)translate(0,-ty)和向下移動(dòng)translate(0,ty);

　　對角移動(dòng)：右下角移動(dòng)translate(tx,ty)、右上角移動(dòng)translate(tx,-ty)、左上角移動(dòng)translate(-tx,-ty)和左下角移動(dòng)translate(-tx,ty)。

　　translateX()：水平方向移動(dòng)一個(gè)對象。對像只向X軸進(jìn)行移動(dòng)，如果值為正值，對像向右移動(dòng);如果值為負(fù)值，對像向左移動(dòng)。translateY()：縱軸方向移動(dòng)一個(gè)對象。對象只向Y軸進(jìn)行移動(dòng)，如果值為正值，對象向下移動(dòng);如果值為負(fù)值，對像向上移動(dòng)。

　　這兩個(gè)函數(shù)和前面介紹的translate()函數(shù)不同的是每個(gè)方法只接受一個(gè)值。

　　所以

　　transform:translate(-100px,0)實(shí)際上等于transform:translateX(-100px);

　　transform:translate(0,-100px)實(shí)際上等于transform:translateY(-100px)。

　　2、scale()

　　讓元素根據(jù)中心原點(diǎn)對對象進(jìn)行縮放。默認(rèn)的值1。因此0.01到0.99之間的任何值，使一個(gè)元素縮小;而任何大于或等于1.01的值，讓元素顯得更大。

　　縮放scale()函數(shù)和translate()函數(shù)的語法非常相似，他可以接受一個(gè)值，也可以同時(shí)接受兩個(gè)值，如果只有一個(gè)值時(shí)，其第二個(gè)值默認(rèn)與第一個(gè)值相等。

　　例如，

　　scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。

　　scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸(水平方向)縮放元素，其默認(rèn)值是1。

　　scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸(縱橫方向)縮放元素，其默認(rèn)值是1。

　　3、rotate()

　　旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)對元素根據(jù)對象原點(diǎn)指定一個(gè)2D旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，接受一個(gè)角度值，用來指定旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對原點(diǎn)中心順時(shí)針旋轉(zhuǎn);如果這個(gè)值為負(fù)值，元素相對原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。

　　rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)

　　rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)

　　4、skew()

　　傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個(gè)對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。

　　一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度;

　　兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度，第二個(gè)參數(shù)表示垂直方向的傾斜角度

　　transform-origin

　　transform-origin是變形原點(diǎn)，也就是該元素圍繞著那個(gè)點(diǎn)變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時(shí)候起作用;

　　因?yàn)槲覀冊啬J(rèn)基點(diǎn)就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點(diǎn)位置的情況下，transform進(jìn)行的rotate,translate,scale,skew等操作都是以元素自己中心位置進(jìn)行變化的。

　　2D 轉(zhuǎn)換元素能夠改變元素 x 和 y 軸

CSS3 里面 animation下有個(gè)animation-fill-mode 設(shè)定動(dòng)畫完成后的狀態(tài)，默認(rèn)是none 設(shè)為forwards 就可以在動(dòng)畫完成后定格在動(dòng)畫最后一幀。

也可以去w3cschool菜鳥教程看看 css3的 animate，可以實(shí)現(xiàn)過渡動(dòng)畫。