?

Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix。下面我們一起來(lái)看看CSS3中transform的旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate具體如何實(shí)現(xiàn)，老樣子，我們就從transform的語(yǔ)法開(kāi)始吧。是構(gòu)成transtion和animation的基礎(chǔ)。

語(yǔ)法：

transform ： none | <transform-function> [ <transform-function> ]* 也就是： transform: rotate | scale | skew | translate |matrix;

?

none:表示不進(jìn)么變換；<transform-function>表示一個(gè)或多個(gè)變換函數(shù)，以空格分開(kāi)；換句話說(shuō)就是我們同時(shí)對(duì)一個(gè)元素進(jìn)行transform的多種屬性操作，例如rotate、scale、translate三種，但這里需要提醒大家的，以往我們疊加效果都是用逗號(hào)（“，”）隔開(kāi)，但transform中使用多個(gè)屬性時(shí)卻需要有空格隔開(kāi)。大家記住了是空格隔開(kāi)。

取值：

transform屬性實(shí)現(xiàn)了一些可用SVG實(shí)現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(jí)(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動(dòng)元素 ，他有幾個(gè)屬性值參數(shù)：rotate;translate;scale;skew;matrix。下面我們分別來(lái)介紹這幾個(gè)屬性值參數(shù)的具體使用方法：

一、旋轉(zhuǎn)rotate

rotate(<angle>) ：通過(guò)指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg):

二、移動(dòng)translate

移動(dòng)translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）；translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)），具體使用方法如下：

1、translate(<translation-value>[, <translation-value>]) ：通過(guò)矢量[tx, ty]指定一個(gè)2D translation，tx 是第一個(gè)過(guò)渡值參數(shù)，ty 是第二個(gè)過(guò)渡值參數(shù)選項(xiàng)。如果?未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對(duì)象進(jìn)行平移，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時(shí)，反方向移動(dòng)物體，其基點(diǎn)默認(rèn)為元素 中心點(diǎn)，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn)。如transform:translate(100px,20px):

2、translateX(<translation-value>) ： 通過(guò)給定一個(gè)X方向上的數(shù)目指定一個(gè)translation。只向x軸進(jìn)行移動(dòng)元素，同樣其基點(diǎn)是元素中心點(diǎn)，也可以根據(jù)transform-origin改變基點(diǎn)位置。如：transform:translateX(100px):

3、translateY(<translation-value>) ：通過(guò)給定Y方向的數(shù)目指定一個(gè)translation。只向Y軸進(jìn)行移動(dòng)，基點(diǎn)在元素心點(diǎn)，可以通過(guò)transform-origin改變基點(diǎn)位置。如：transform:translateY(20px):

三、縮放scale

縮放scale和移動(dòng)translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。下面我們具體來(lái)看看這三種情況具體使用方法：

1、scale(<number>[, <number>])：提供執(zhí)行[sx,sy]縮放矢量的兩個(gè)參數(shù)指定一個(gè)2D scale（2D縮放）。如果第二個(gè)參數(shù)未提供，則取與第一個(gè)參數(shù)一樣的值。scale(X,Y)是用于對(duì)元素進(jìn)行縮放，可以通過(guò)transform-origin對(duì)元素的基點(diǎn)進(jìn)行設(shè)置，同樣基點(diǎn)在元素中心位置；基中X表示水平方向縮放的倍數(shù)，Y表示垂直方向的縮放倍數(shù)，而Y是一個(gè)可選參數(shù)，如果沒(méi)有設(shè)置Y值，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。如：transform:scale(2,1.5):

2、scaleX(<number>) ： 使用 [sx,1] 縮放矢量執(zhí)行縮放操作，sx為所需參數(shù)。scaleX表示元素只在X軸(水平方向)縮放元素，他的默認(rèn)值是(1,1)，其基點(diǎn)一樣是在元素的中心位置，我們同樣是通過(guò)transform-origin來(lái)改變?cè)氐幕c(diǎn)。如：transform:scaleX(2):

3、scaleY(<number>) ： 使用 [1,sy] 縮放矢量執(zhí)行縮放操作，sy為所需參數(shù)。scaleY表示元素只在Y軸（垂直方向）縮放元素，其基點(diǎn)同樣是在元素中心位置，可以通過(guò)transform-origin來(lái)改變?cè)氐幕c(diǎn)。如transform:scaleY(2):

四、扭曲skew

扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用如下：

1、skew(<angle> [, <angle>]) ：X軸Y軸上的skew transformation（斜切變換）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無(wú)斜切。skew是用來(lái)對(duì)元素進(jìn)行扭曲變行，第一個(gè)參數(shù)是水平方向扭曲角度，第二個(gè)參數(shù)是垂直方向扭曲角度。其中第二個(gè)參數(shù)是可選參數(shù)，如果沒(méi)有設(shè)置第二個(gè)參數(shù)，那么Y軸為0deg。同樣是以元素中心為基點(diǎn)，我們也可以通過(guò)transform-origin來(lái)改變?cè)氐幕c(diǎn)位置。如：transform:skew(30deg,10deg):

2、skewX(<angle>) ： 按給定的角度沿X軸指定一個(gè)skew transformation（斜切變換）。skewX是使元素以其中心為基點(diǎn)，并在水平方向（X軸）進(jìn)行扭曲變行，同樣可以通過(guò)transform-origin來(lái)改變?cè)氐幕c(diǎn)。如：transform:skewX(30deg)

3、skewY(<angle>) ： 按給定的角度沿Y軸指定一個(gè)skew transformation（斜切變換）。skewY是用來(lái)設(shè)置元素以其中心為基點(diǎn)并按給定的角度在垂直方向（Y軸）扭曲變形。同樣我們可以通過(guò)transform-origin來(lái)改變?cè)氐幕c(diǎn)。如：transform:skewY（10deg）

五、矩陣matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一個(gè)含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換，相當(dāng)于直接應(yīng)用一個(gè)[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣，我在這里只是簡(jiǎn)單的說(shuō)一下CSS3中的transform有這么一個(gè)屬性值，如果有感興趣的朋友可以去了解更深層次的martix使用方法，這里就不多說(shuō)了。

改變?cè)鼗c(diǎn)transform-origin

前面我們多次提到transform-origin這個(gè)東東，他的主要作用就是讓我們?cè)谶M(jìn)行transform動(dòng)作之前可以改變?cè)氐幕c(diǎn)位置，因?yàn)槲覀冊(cè)啬J(rèn)基點(diǎn)就是其中心位置，換句話說(shuō)我們沒(méi)有使用transform-origin改變?cè)鼗c(diǎn)位置的情況下，transform進(jìn)行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進(jìn)行變化的。但有時(shí)候我們需要在不同的位置對(duì)元素進(jìn)行這些操作，那么我們就可以使用transform-origin來(lái)對(duì)元素進(jìn)行基點(diǎn)位置改變，使元素基點(diǎn)不在是中心位置，以達(dá)到你需要的基點(diǎn)位置。下面我們主要來(lái)看看其使用規(guī)則：

transform-origin(X,Y):用來(lái)設(shè)置元素的運(yùn)動(dòng)的基點(diǎn)（參照點(diǎn)）。默認(rèn)點(diǎn)是元素的中心點(diǎn)。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數(shù)值left,center,right；Y和X一樣除了百分值外還可以設(shè)置字符值top,center,bottom，這個(gè)看上去有點(diǎn)像我們background-position設(shè)置一樣；下面我列出他們相對(duì)應(yīng)的寫(xiě)法：

1、top left | left top 等價(jià)于 0 0 | 0% 0%

2、top | top center | center top 等價(jià)于 50% 0

3、right top | top right 等價(jià)于 100% 0

4、left | left center | center left 等價(jià)于 0 50% | 0% 50%

5、center | center center 等價(jià)于 50% 50%（默認(rèn)值）

6、right | right center | center right 等價(jià)于 100% 50%

7、bottom left | left bottom 等價(jià)于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等價(jià)于 50% 100%

9、bottom right | right bottom 等價(jià)于 100% 100%

其中 left,center right是水平方向取值，對(duì)應(yīng)的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個(gè)值，表示垂直方向值不變，我們分別來(lái)看看以下幾個(gè)實(shí)例

(1)transform-origin:(left,top):

(2)transform-origin:right

(3)transform-origin(25%,75%)

更多的改變中心基點(diǎn)辦法，大家可以在本地多測(cè)試一下，多體會(huì)一下，這里還要提醒大家一點(diǎn)的是，transform-origin并不是transform中的屬性值，他具有自己的語(yǔ)法，前面我也說(shuō)過(guò)了，說(shuō)簡(jiǎn)單一點(diǎn)就是類似于我們的background-position的用法，但又有其不一樣，因?yàn)槲覀僢ackground-position不需要區(qū)別瀏覽器內(nèi)核不同的寫(xiě)法，但transform-origin跟其他的css3屬性一樣，我們需要在不同的瀏覽內(nèi)核中加上相應(yīng)的前綴，下面列出各種瀏覽器內(nèi)核下的語(yǔ)法規(guī)則：

//Mozilla內(nèi)核瀏覽器：firefox3.5+-moz-transform-origin: x y;//Webkit內(nèi)核瀏覽器：Safari and Chrome-webkit-transform-origin: x y;//Opera-o-transform-origin: x y ;//IE9-ms-transform-origin: x y;//W3C標(biāo)準(zhǔn)transform-origin: x y ;

?

transform在不同瀏覽器內(nèi)核下的書(shū)寫(xiě)規(guī)則

//Mozilla內(nèi)核瀏覽器：firefox3.5+-moz-transform: rotate | scale | skew | translate ;//Webkit內(nèi)核瀏覽器：Safari and Chrome-webkit-transform: rotate | scale | skew | translate ;//Opera-o-transform: rotate | scale | skew | translate ;//IE9-ms-transform: rotate | scale | skew | translate ;//W3C標(biāo)準(zhǔn)transform: rotate | scale | skew | translate ;

?

上面列出是不同瀏覽內(nèi)核transform的書(shū)寫(xiě)規(guī)則，如果需要兼容各瀏覽器的話，以上寫(xiě)法都需要調(diào)用。

支持transform瀏覽器

　　

　　同樣的transform在IE9下版本是無(wú)法兼容的，之所以有好多朋友說(shuō)，IE用不了，搞這個(gè)做什么？個(gè)人認(rèn)為，CSS3推出來(lái)了，他是一門相對(duì)前沿的技術(shù)，做為Web前端的開(kāi)發(fā)者或者愛(ài)好者都有必要了解和掌握的一門新技術(shù)，如果要等到所有瀏覽器兼容，那我們只能對(duì)css3說(shuō)NO，我用不你。因?yàn)镮E老大是跟不上了，，，，純屬個(gè)人觀點(diǎn)，不代表任何。還是那句話，感興趣的朋友跟我一樣，不去理會(huì)IE，我們繼續(xù)看下去。

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

下面我們同樣從其最語(yǔ)法和屬性值開(kāi)始一步一步來(lái)學(xué)習(xí)transition的具體使用

語(yǔ)法:

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

?

transition主要包含四個(gè)屬性值：執(zhí)行變換的屬性：transition-property,變換延續(xù)的時(shí)間：transition-duration,在延續(xù)時(shí)間段，變換的速率變化transition-timing-function,變換延遲時(shí)間transition-delay。下面分別來(lái)看這四個(gè)屬性值

一、transition-property:

語(yǔ)法：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

?

transition-property是用來(lái)指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果，其主要有以下幾個(gè)值：none(沒(méi)有屬性改變)；all（所有屬性改變）這個(gè)也是其默認(rèn)值；indent（元素屬性名）。當(dāng)其值為none時(shí)，transition馬上停止執(zhí)行，當(dāng)指定為all時(shí)，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果，ident是可以指定元素的某一個(gè)屬性值。其對(duì)應(yīng)的類型如下：

1、color: 通過(guò)紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值處理）如：background-color,border-color,color,outline-color等css屬性；

2、length: 真實(shí)的數(shù)字 如：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等屬性；

3、percentage:真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；

4、integer離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生 如：outline-offset,z-index等屬性；

5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom,opacity,font-weight,等屬性；

6、transform list:詳情請(qǐng)參閱：《CSS3 Transform》

7、rectangle:通過(guò)x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換，如：crop

8、visibility: 離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility

9、shadow: 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow

10、gradient: 通過(guò)每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫(huà),如：background-image

11、paint server (SVG): 只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似

12、space-separated list of above:如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無(wú)變化

13、a shorthand property: 如果縮寫(xiě)的所有部分都可以實(shí)現(xiàn)動(dòng)畫(huà)，則會(huì)像所有單個(gè)屬性變化一樣變化

具體什么css屬性可以實(shí)現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實(shí)現(xiàn)transition效果的CSS屬性值以及值的類型，大家可以點(diǎn)這里了解詳情。這里需要提醒一點(diǎn)是，并不是什么屬性改變都為觸發(fā)transition動(dòng)作效果，比如頁(yè)面的自適應(yīng)寬度，當(dāng)瀏覽器改變寬度時(shí)，并不會(huì)觸發(fā)transition的效果。但上述表格所示的屬性類型改變都會(huì)觸發(fā)一個(gè)transition動(dòng)作效果。

二、transition-duration:

語(yǔ)法：

transition-duration ： <time> [, <time>]*

?

transition-duration是用來(lái)指定元素 轉(zhuǎn)換過(guò)程的持續(xù)時(shí)間，取值：<time>為數(shù)值，單位為s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after偽元素。其默認(rèn)值是0，也就是變換時(shí)是即時(shí)的。

三、transition-timing-function:

語(yǔ)法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

?

取值：

transition-timing-function的值允許你根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率，transition-timing-function有6個(gè)可能值：

1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。

其是cubic-bezier為通過(guò)貝賽爾曲線來(lái)計(jì)算“轉(zhuǎn)換”過(guò)程中的屬性值，如下曲線所示，通過(guò)改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過(guò)程的Output Percentage。初始默認(rèn)值為default.

其他幾個(gè)屬性的示意圖：

四、transition-delay:

語(yǔ)法：

transition-delay ： <time> [, <time>]*

?

transition-delay是用來(lái)指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，也就是說(shuō)當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開(kāi)始執(zhí)行transition效果，其取值：<time>為數(shù)值，單位為s（秒）或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用于所有元素，包括:before和:after偽元素。 默認(rèn)大小是"0"，也就是變換立即執(zhí)行，沒(méi)有延遲。

有時(shí)我們不只改變一個(gè)css效果的屬性,而是想改變兩個(gè)或者多個(gè)css屬性的transition效果，那么我們只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“，”）隔開(kāi)，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：transition-delay與transition-duration的值都是時(shí)間，所以要區(qū)分它們?cè)谶B寫(xiě)中的位置，一般瀏覽器會(huì)根據(jù)先后順序決定，第一個(gè)可以解析為時(shí)間的怭值為transition-duration第二個(gè)為transition-delay。如：

a {-moz-transition: background 0.5s ease-in,color 0.3s ease-out; -webkit-transition: background 0.5s ease-in,color 0.3s ease-out; -o-transition: background 0.5s ease-in,color 0.3s ease-out; transition: background 0.5s ease-in,color 0.3s ease-out; }

?

如果你想給元素執(zhí)行所有transition效果的屬性，那么我們還可以利用all屬性值來(lái)操作，此時(shí)他們共享同樣的延續(xù)時(shí)間以及速率變換方式，如：

a {-moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

?

綜合上述我們可以給transition一個(gè)速記法：transition: <property>?<duration>?<animation type>?<delay>如下圖所示：

相對(duì)應(yīng)的一個(gè)示例代碼：

p {-webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; }

?

瀏覽器的兼容性:

因?yàn)閠ransition最早是有由webkit內(nèi)核瀏覽器提出來(lái)的，mozilla和opera都是最近版本才支持這個(gè)屬性，而我們的大眾型瀏覽器IE全家都是不支持，另外由于各大現(xiàn)代瀏覽器Firefox,Safari,Chrome,Opera都還不支持W3C的標(biāo)準(zhǔn)寫(xiě)法，所以在應(yīng)用transition時(shí)我們有必要加上各自的前綴，最好在放上我們W3C的標(biāo)準(zhǔn)寫(xiě)法，這樣標(biāo)準(zhǔn)的會(huì)覆蓋前面的寫(xiě)法，只要瀏覽器支持我們的transition屬性，那么這種效果就會(huì)自動(dòng)加上去：

//Mozilla內(nèi)核-moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //Webkit內(nèi)核 -webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //Opera -o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //W3C 標(biāo)準(zhǔn) transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

?

div{width:200px;height:100px;background: #00f;-webkit-transition: all 1s ease .1s;}div:hover{background: #f00;transform: translateZ(-25px) rotateX(90deg);}

?

單從Animation字面上的意思，我們就知道是“動(dòng)畫(huà)”的意思。但CSS3中的Animation與HTML5中的Canvas繪制動(dòng)畫(huà)又不同，Animation只應(yīng)用在頁(yè)面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出來(lái)的動(dòng)畫(huà)效果又不一樣，因?yàn)槲覀兪褂肅SS3的Animation制作動(dòng)畫(huà)我們可以省去復(fù)雜的js,jquery代碼（像我這種不懂js的人來(lái)說(shuō)是件很高興的事了），只是有一點(diǎn)不足之處，我們運(yùn)用Animation能創(chuàng)建自己想要的一些動(dòng)畫(huà)效果，但是有點(diǎn)粗糙，如果想要制作比較好的動(dòng)畫(huà)，我見(jiàn)意大家還是使用flash或js等。雖然說(shuō)Animation制作出來(lái)的動(dòng)畫(huà)簡(jiǎn)單粗糙，但我想還是不能減少我們大家對(duì)其學(xué)習(xí)的熱情。

在開(kāi)始介紹Animation之前我們有必要先來(lái)了解一個(gè)特殊的東西，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”，玩過(guò)flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生。下面我們就一起來(lái)看看這個(gè)“Keyframes”是什么東西。前面我們?cè)谑褂胻ransition制作一個(gè)簡(jiǎn)單的transition效果時(shí)，我們包括了初始屬性和最終屬性，一個(gè)開(kāi)始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率，其實(shí)這些值都是一個(gè)中間值，如果我們要控制的更細(xì)一些，比如說(shuō)我要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（換到flash中說(shuō)，就是第一幀我要執(zhí)行什么動(dòng)作，第二幀我要執(zhí)行什么動(dòng)作），這樣我們用Transition就很難實(shí)現(xiàn)了，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來(lái)控制。那么CSS3的Animation就是由“keyframes”這個(gè)屬性來(lái)實(shí)現(xiàn)這樣的效果。下面我們一起先來(lái)看看Keyframes:

Keyframes具有其自己的語(yǔ)法規(guī)則，他的命名是由"@keyframes"開(kāi)頭，后面緊接著是這個(gè)“動(dòng)畫(huà)的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫(xiě)法一樣。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，如“0%”到"100%"之間，我們可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比，我們分別給每一個(gè)百分比中給需要有動(dòng)畫(huà)效果的元素加上不同的屬性，從而讓元素達(dá)到一種在不斷變化的效果，比如說(shuō)移動(dòng)，改變?cè)仡伾?#xff0c;位置，大小，形狀等，不過(guò)有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來(lái)代表一個(gè)動(dòng)畫(huà)是從哪開(kāi)始，到哪結(jié)束，也就是說(shuō)這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說(shuō)的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒(méi)有加上的話，我們這個(gè)keyframes是無(wú)效的，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值。

Keyframes可以指定任何順序排列來(lái)決定Animation動(dòng)畫(huà)變化的關(guān)鍵位置。其具體語(yǔ)法規(guī)則如下：

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';keyframes-blocks: [ keyframe-selectors block ]* ;keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

?

我把上面的語(yǔ)法綜合起來(lái)

@keyframes IDENT {from {Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部寫(xiě)成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }

?

其中IDENT是一個(gè)動(dòng)畫(huà)名稱，你可以隨便取，當(dāng)然語(yǔ)義化一點(diǎn)更好，Percentage是百分比值，我們可以添加許多個(gè)這樣的百分比，Properties為css的屬性名，比如說(shuō)left,background等，value就是相對(duì)應(yīng)的屬性的屬性值。值得一提的是，我們from和to 分別對(duì)應(yīng)的是0%和100%。這個(gè)我們?cè)谇懊嬉蔡岬竭^(guò)了。到目前為止支技animation動(dòng)畫(huà)的只有webkit內(nèi)核的瀏覽器，所以我需要在上面的基礎(chǔ)上加上-webkit前綴，據(jù)說(shuō)Firefox5可以支持css3的 animation動(dòng)畫(huà)屬性。

我們來(lái)看一個(gè)W3C官網(wǎng)的實(shí)例

@-webkit-keyframes 'wobble' {0% {margin-left: 100px; background: green; } 40% { margin-left: 150px; background: orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } }

?

這里我們定義了一個(gè)叫“wobble”的動(dòng)畫(huà)，他的動(dòng)畫(huà)是從0%開(kāi)始到100%時(shí)結(jié)束，從中還經(jīng)歷了一個(gè)40%和60%兩個(gè)過(guò)程，上面代碼具體意思是：wobble動(dòng)畫(huà)在0%時(shí)元素定位到left為100px的位置背景色為green，然后40%時(shí)元素過(guò)渡到left為150px的位置并且背景色為orange，60%時(shí)元素過(guò)渡到left為75px的位置,背景色為blue，最后100%結(jié)束動(dòng)畫(huà)的位置元素又回到起點(diǎn)left為100px處,背景色變成red。假設(shè)置我們只給這個(gè)動(dòng)畫(huà)有10s的執(zhí)行時(shí)間，那么他每一段執(zhí)行的狀態(tài)如下圖所示：

Keyframes定義好了以后，我們需要怎么去調(diào)用剛才定義好的動(dòng)畫(huà)“wobble”

CSS3的animation類似于transition屬性，他們都是隨著時(shí)間改變?cè)氐膶傩灾怠Ｋ麄冎饕獏^(qū)別是transition需要觸發(fā)一個(gè)事件(hover事件或click事件等)才會(huì)隨時(shí)間改變其css屬性；而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來(lái)改變?cè)豤ss的屬性值，從而達(dá)到一種動(dòng)畫(huà)的效果。這樣我們就可以直接在一個(gè)元素中調(diào)用animation的動(dòng)畫(huà)屬性,基于這一點(diǎn)，css3的animation就需要明確的動(dòng)畫(huà)屬性值，這也就是回到我們上面所說(shuō)的，我們需要keyframes來(lái)定義不同時(shí)間的css屬性值,達(dá)到元素在不同時(shí)間段變化的效果。

下面我們來(lái)看看怎么給一個(gè)元素調(diào)用animation屬性

.demo1 {width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*動(dòng)畫(huà)屬性名，也就是我們前面keyframes定義的動(dòng)畫(huà)名*/ -webkit-animation-duration: 10s;/*動(dòng)畫(huà)持續(xù)時(shí)間*/ -webkit-animation-timing-function: ease-in-out; /*動(dòng)畫(huà)頻率，和transition-timing-function是一樣的*/ -webkit-animation-delay: 2s;/*動(dòng)畫(huà)延遲時(shí)間*/ -webkit-animation-iteration-count: 10;/*定義循環(huán)資料，infinite為無(wú)限次*/ -webkit-animation-direction: alternate;/*定義動(dòng)畫(huà)方式*/ }

?

CSS Animation動(dòng)畫(huà)效果將會(huì)影響元素相對(duì)應(yīng)的css值，在整個(gè)動(dòng)畫(huà)過(guò)程中，元素的變化屬性值完全是由animation來(lái)控制，動(dòng)畫(huà)后面的會(huì)覆蓋前面的屬性值。如上面例子：因?yàn)槲覀冞@個(gè)demo只是在不同的時(shí)間段改變了demo1的背景色和左邊距，其默認(rèn)值是：margin-left:100px;background: blue；但當(dāng)我們?cè)趫?zhí)行動(dòng)畫(huà)0%時(shí)，margin-left:100px,background:green；當(dāng)執(zhí)行到40%時(shí)，屬性變成了：margin-left:150px;background:orange;當(dāng)執(zhí)行到60%時(shí)margin-left:75px;background:blue;當(dāng)動(dòng)畫(huà) 執(zhí)行到100%時(shí)：margin-left:100px;background: red;此時(shí)動(dòng)畫(huà)將完成，那么margin-left和background兩個(gè)屬性值將是以100%時(shí)的為主,他不會(huì)產(chǎn)生疊加效果，只是一次一次覆蓋前一次出將的css屬性。就如我們平時(shí)的css一樣，最后出現(xiàn)的權(quán)根是最大的。當(dāng)動(dòng)畫(huà)結(jié)束后，樣式回到默認(rèn)效果。

我們可以看一張來(lái)自w3c官網(wǎng)有關(guān)于css3的animation對(duì)屬性變化的過(guò)程示意圖

從上面的Demo中我們可以看出animation和transition一樣有自己相對(duì)應(yīng)的屬性，那么在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我們分別來(lái)看看這幾個(gè)屬性的使用

一、animation-name:

語(yǔ)法：

animation-name: none | IDENT[,none | IDENT]*;

?

取值說(shuō)明：

animation-name:是用來(lái)定義一個(gè)動(dòng)畫(huà)的名稱，其主要有兩個(gè)值：IDENT是由Keyframes創(chuàng)建的動(dòng)畫(huà)名，換句話說(shuō)此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實(shí)現(xiàn)任何動(dòng)畫(huà)效果；none為默認(rèn)值，當(dāng)值為none時(shí)，將沒(méi)有任何動(dòng)畫(huà)效果。另外我們這個(gè)屬性跟前面所講的transition一樣，我們可以同時(shí)附幾個(gè)animation給一個(gè)元素，我們只需要用逗號(hào)“，”隔開(kāi)。

二、animation-duration：

語(yǔ)法：

animation-duration: <time>[,<time>]*

?

取值說(shuō)明：

animation-duration是用來(lái)指定元素播放動(dòng)畫(huà)所持續(xù)的時(shí)間長(zhǎng)，取值:<time>為數(shù)值，單位為s （秒.）其默認(rèn)值為“0”。這個(gè)屬性跟transition中的transition-duration使用方法是一樣的。

三、animation-timing-function:

語(yǔ)法：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

?

取值說(shuō)明：

animation-timing-function:是指元素根據(jù)時(shí)間的推進(jìn)來(lái)改變屬性值的變換速率，說(shuō)得簡(jiǎn)單點(diǎn)就是動(dòng)畫(huà)的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點(diǎn)這里，查看其中transition-timing-function的使用方法。

四、animation-delay:

語(yǔ)法：

animation-delay: <time>[,<time>]*

?

取值說(shuō)明：

animation-delay:是用來(lái)指定元素動(dòng)畫(huà)開(kāi)始時(shí)間。取值為<time>為數(shù)值，單位為s(秒)，其默認(rèn)值也是0。這個(gè)屬性和transition-delayy使用方法是一樣的。

五、animation-iteration-count

語(yǔ)法：

animation-iteration-count:infinite | <number> [, infinite | <number>]*

?

取值說(shuō)明：

animation-iteration-count是用來(lái)指定元素播放動(dòng)畫(huà)的循環(huán)次數(shù)，其可以取值<number>為數(shù)字，其默認(rèn)值為“1”；infinite為無(wú)限次數(shù)循環(huán)。

六、animation-direction

語(yǔ)法：

animation-direction: normal | alternate [, normal | alternate]*

取值說(shuō)明：

animation-direction是用來(lái)指定元素動(dòng)畫(huà)播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

七、animation-play-state

語(yǔ)法：

animation-play-state:running | paused [, running | paused]*

?

取值說(shuō)明：

animation-play-state主要是用來(lái)控制元素動(dòng)畫(huà)的播放狀態(tài)。其主要有兩個(gè)值，running和paused其中running為默認(rèn)值。他們的作用就類似于我們的音樂(lè)播放器一樣，可以通過(guò)paused將正在播放的動(dòng)畫(huà)停下了，也可以通過(guò)running將暫停的動(dòng)畫(huà)重新播放，我們這里的重新播放不一定是從元素動(dòng)畫(huà)的開(kāi)始播放，而是從你暫停的那個(gè)位置開(kāi)始播放。另外如果暫時(shí)了動(dòng)畫(huà)的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。這個(gè)屬性目前很少內(nèi)核支持，所以只是稍微提一下。

上面我們分別介紹了animation中的各個(gè)屬性的語(yǔ)法和取值，那么我們綜合上面的內(nèi)容可以給animation屬性一個(gè)速記法：

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

?

如下圖所示

兼容的瀏覽器

前面我也簡(jiǎn)單的提過(guò)，CSS3的animation到目前為止只支持webkit內(nèi)核的瀏覽器，因?yàn)樽钤缣岢鲞@個(gè)屬性的就是safari公司,據(jù)說(shuō)Firefox5.0+將支持Animation。如圖所示

那么到此為止，我們主要一起學(xué)習(xí)了有關(guān)animation的理論知識(shí)，下面我們一起來(lái)看兩個(gè)實(shí)例制作過(guò)程，來(lái)加強(qiáng)對(duì)animation的實(shí)踐能力

通過(guò)上面，我想大家對(duì)CSS3的Transition屬性的使用有一定的概念存在了，下面為了加強(qiáng)大家在這方面的使用，我們一起來(lái)看下面的DEMO。我們通過(guò)實(shí)踐來(lái)鞏固前面的理論知識(shí)，也通過(guò)實(shí)踐來(lái)加強(qiáng)transition的記憶。

?

?

最后，提一下，animation的不同狀態(tài)下的連續(xù)動(dòng)畫(huà)的連寫(xiě)方式：

<div class="element">小火箭</div>.element { animation: fadeIn 1s, float .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒后開(kāi)始無(wú)限漂浮 */

還有就是標(biāo)簽嵌套與獨(dú)立動(dòng)畫(huà)：

<div class="element-wrap"><div class="element">小火箭</div></div>.element-wrap { animation: fadeIn 1s; } /* 我淡出, 需要1秒 */ .element { animation: float .5s 1s infinite; } /* 我1秒后開(kāi)始無(wú)限漂浮 */

有人可能會(huì)奇怪了。animation本身就支持多動(dòng)畫(huà)并行，你還搞個(gè)標(biāo)簽嵌套，沒(méi)有任何使用的理由啊！沒(méi)錯(cuò)，單純看我們這個(gè)例子，確實(shí)是這樣。但是：

① 提取公用動(dòng)畫(huà)
這類多屏動(dòng)畫(huà)是有N多元素同時(shí)執(zhí)行不同的動(dòng)畫(huà)。比方說(shuō)，火箭是淡出，然后上下漂浮；火箭的火焰是淡出，然后大小變化；黑洞是淡出，然后左右隨波。你如何實(shí)現(xiàn)？

如果純粹借助animation語(yǔ)法，應(yīng)該是：

.element1 { animation: fadeIn 1s, float .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒后開(kāi)始無(wú)限漂浮 */ .element2 { animation: fadeIn 1s, size .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒后開(kāi)始大小變化 */ .element3 { animation: fadeIn 1s, move .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒后開(kāi)始左右移動(dòng) */

?

可以看到，淡出是公用的動(dòng)畫(huà)效果，我們可以借助嵌套標(biāo)簽，實(shí)現(xiàn)公用語(yǔ)法的合并，方面后期維護(hù)：

.element-wrap { animation: fadeIn 1s; } /* 大家都1秒淡出 */ .element1 { animation: float .5s 1s infinite; } /* 我1秒后無(wú)限漂浮 */ .element2 { animation: size .5s 1s infinite; } /* 我1秒后忽大忽小 */ .element3 { animation: move .5s 1s infinite; } /* 我1秒后左右移動(dòng) */

?

②避免變換沖突
有個(gè)元素動(dòng)畫(huà)是邊360度旋轉(zhuǎn)、邊放大(從0放大到100%)，像這種具有典型特征的動(dòng)畫(huà)我們顯然要獨(dú)立提取與公用的：

@keyframes spin { /* transform: rotate... */ } @keyframes zoomIn { /* transform: scale... */ }

?

好了，現(xiàn)在問(wèn)題來(lái)了，變放大邊旋轉(zhuǎn)：

.element { animation: spin 1s, zoomIn 1s; } /* 旋轉(zhuǎn)：啊，完蛋啦，我被放大覆蓋啦！ */

?

由于都是使用transform, 發(fā)生了殘忍的覆蓋。當(dāng)然，有好事的人會(huì)說(shuō)，你使用zoom不就好了！確實(shí)，如果只是移動(dòng)端，使用zoom確實(shí)棒棒噠！但是，我們這個(gè)企業(yè)活動(dòng)，PC是主戰(zhàn)場(chǎng)，因此，FireFox瀏覽器（FF不識(shí)zoom）是不能無(wú)視的。

怎么辦？重新建一個(gè)名為spinZoomIn的動(dòng)畫(huà)關(guān)鍵幀描述還是？

對(duì)啊，你直接外面套一層標(biāo)簽不就萬(wàn)事大吉了?：

.element-wrap { animation: spin 1s; } /* 我轉(zhuǎn)轉(zhuǎn)轉(zhuǎn) */ .element { animation: zoomIn 1s; } /* 我大大大 */

對(duì)于transform-origin屬性：

#job_page3 .j3_01 {-webkit-transform-origin: 50% 75%;-webkit-animation: scale3 0.8s both; }

可以這么寫(xiě)，就可以在只是改變基點(diǎn)的情況下，運(yùn)用同一個(gè)動(dòng)畫(huà)，非常方便。

?

原文轉(zhuǎn)載：https://www.cnblogs.com/qianduanjingying/p/4937574.html

轉(zhuǎn)載于:https://www.cnblogs.com/xiaosongJiang/p/10230755.html

總結(jié)

以上是生活随笔為你收集整理的css3中的变形（transform）、过渡(transtion)、动画(animation)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。