一，css變形

1儡毕，旋轉(zhuǎn) rotate()

語(yǔ)法：.class {transform: rotate(num deg);}，num為數(shù)字
旋轉(zhuǎn)rotate()函數(shù)通過(guò)指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn)咙咽。它主要在二維空間內(nèi)進(jìn)行操作玛瘸，設(shè)置一個(gè)角度值，用來(lái)指定旋轉(zhuǎn)的幅度翠桦。如果這個(gè)值為正值横蜒，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值秤掌，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)愁铺。

2，扭曲 skew()

語(yǔ)法：.class {skew(x,y)}闻鉴，x茵乱，y為數(shù)字，單位是deg
扭曲skew()函數(shù)能夠讓元素傾斜顯示孟岛。它可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜瓶竭。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)渠羞，而不會(huì)改變?cè)氐男螤罱锓　kew()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤睢?/p>

3次询，縮放 scale()

語(yǔ)法：.class {scale(X,Y)} x,y為數(shù)字荧恍，0～1縮小，>1放大
注意： scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值送巡，作用使一個(gè)元素縮心〔ぁ；而任何大于或等于1.01的值骗爆，作用是讓元素放大次氨。

4，位移 translate()

語(yǔ)法：.class {translate(x,y)}x,y為數(shù)字摘投，單位可以是px
translate()函數(shù)可以將元素向指定的方向移動(dòng)煮寡，類似于position中的relative∠簦或以簡(jiǎn)單的理解為幸撕，使用translate()函數(shù)，可以把元素從原來(lái)的位置移動(dòng)外臂，而不影響在X杈帐、Y軸上的任何Web組件。

5专钉，原點(diǎn) transform-origin

語(yǔ)法：.class {transform-origin: position;}挑童，position為位置描述，如圖

位置

二菇民，動(dòng)畫(huà) transition

CSS3中新增加了一個(gè)新的模塊transition尽楔，它可以通過(guò)一些簡(jiǎn)單的CSS事件來(lái)觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩第练。

在CSS中創(chuàng)建簡(jiǎn)單的過(guò)渡效果可以從以下幾個(gè)步驟來(lái)實(shí)現(xiàn)：
第一阔馋，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；
第二娇掏，聲明過(guò)渡元素最終狀態(tài)樣式呕寝，比如懸浮狀態(tài)；
第三婴梧，在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)下梢，添加一些不同的樣式。

CSS3的過(guò)度transition屬性是一個(gè)復(fù)合屬性塞蹭，主要包括以下幾個(gè)子屬性：

• transition-property:指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性
• transition-duration:指定完成過(guò)渡所需的時(shí)間
• transition-timing-function:指定過(guò)渡函數(shù)
• transition-delay:指定開(kāi)始出現(xiàn)的延遲時(shí)間

有時(shí)我們想改變兩個(gè)或者多個(gè)css屬性的transition效果時(shí)孽江，只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“,”）隔開(kāi)番电，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式岗屏。但需要值得注意的一點(diǎn)：第一個(gè)時(shí)間的值為 transition-duration，第二個(gè)為transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

1这刷，過(guò)渡屬性 transition-property

語(yǔ)法：.class {transition-property: attr;} attr為CSS屬性名稱
transition-property用來(lái)指定過(guò)渡動(dòng)畫(huà)的CSS屬性名稱涎跨，而這個(gè)過(guò)渡屬性只有具備一個(gè)中點(diǎn)值的屬性（需要產(chǎn)生動(dòng)畫(huà)的屬性）才能具備過(guò)渡效果，其對(duì)應(yīng)具有過(guò)渡的CSS屬性主要有：

image

2崭歧，過(guò)渡時(shí)間 transition-duration

語(yǔ)法：.class {transition-duration: .5s;} .5是數(shù)字秒數(shù)，單位s
transition-duration屬性主要用來(lái)設(shè)置一個(gè)屬性過(guò)渡到另一個(gè)屬性所需的時(shí)間撞牢，也就是從舊屬性過(guò)渡到新屬性花費(fèi)的時(shí)間長(zhǎng)度率碾，俗稱持續(xù)時(shí)間。

3屋彪，過(guò)渡函數(shù) transition-timing-function

語(yǔ)法：.class {transition-timing-function: value;} value為時(shí)間函數(shù)
transition-timing-function屬性指的是過(guò)渡的“緩動(dòng)函數(shù)”所宰。主要用來(lái)指定瀏覽器的過(guò)渡速度，以及過(guò)渡期間的操作進(jìn)展情況畜挥，其中要包括以下幾種函數(shù)：

image

4仔粥，延遲時(shí)間 transition-delay

語(yǔ)法：.class {transition-delay: .5s;} .5是數(shù)字秒數(shù)，單位s
transition-delay主要用來(lái)指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間蟹但，也就是說(shuō)當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開(kāi)始執(zhí)行躯泰。

三，動(dòng)畫(huà) Keyframes

Keyframes被稱為關(guān)鍵幀华糖，其類似于Flash中的關(guān)鍵幀麦向。在CSS3中其主要以“@keyframes”開(kāi)頭，后面緊跟著是動(dòng)畫(huà)名稱加上一對(duì)花括號(hào)“{…}”客叉，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則诵竭。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

關(guān)鍵幀的調(diào)用使用 animation，語(yǔ)法：.class {animation: framesName durationTime timeFunction startTime;} framesName為關(guān)鍵幀的名稱兼搏，durationTime為數(shù)據(jù)幀的開(kāi)始時(shí)間卵慰，timeFunction為時(shí)間函數(shù)，startTime為開(kāi)始延時(shí)時(shí)間佛呻。例如.class {animation: changecolor 5s ease .1s;}

1裳朋，調(diào)用動(dòng)畫(huà) animation-name

語(yǔ)法：.class {animation-name: none | IDENT;} IDENT 為定義的動(dòng)畫(huà)名，none取消動(dòng)畫(huà)
animation-name屬性主要是用來(lái)調(diào)用 @keyframes 定義好的動(dòng)畫(huà)吓著。需要特別注意: animation-name 調(diào)用的動(dòng)畫(huà)名需要和“@keyframes”定義的動(dòng)畫(huà)名稱完全一致（區(qū)分大小寫(xiě)）再扭，如果不一致將不具有任何動(dòng)畫(huà)效果。

2夜矗，持續(xù)時(shí)間 animation-duration

語(yǔ)法：.class {animation-duration: <time>} time為執(zhí)行持續(xù)時(shí)間泛范，單位s
animation-duration主要用來(lái)設(shè)置CSS3動(dòng)畫(huà)播放時(shí)間，其使用方法和transition-duration類似紊撕，是用來(lái)指定元素播放動(dòng)畫(huà)所持續(xù)的時(shí)間長(zhǎng)罢荡，也就是完成從0%到100%一次動(dòng)畫(huà)所需時(shí)間。

3，動(dòng)畫(huà)函數(shù) animation-timing-function

語(yǔ)法：.class {animation-timing-function: <function>;} funciton為動(dòng)畫(huà)時(shí)間函數(shù)
animation-timing-function屬性主要用來(lái)設(shè)置動(dòng)畫(huà)播放方式区赵。它和transition中的transition-timing-function一樣惭缰，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。

4笼才，延時(shí)時(shí)間 animation-delay

語(yǔ)法：animation-delay:<time> time為延時(shí)時(shí)間漱受，單位s
animation-delay屬性用來(lái)定義動(dòng)畫(huà)開(kāi)始播放的時(shí)間，用來(lái)觸發(fā)動(dòng)畫(huà)播放的時(shí)間點(diǎn)骡送。和transition-delay屬性一樣昂羡，用于定義在瀏覽器開(kāi)始執(zhí)行動(dòng)畫(huà)之前等待的時(shí)間。

5摔踱，播放方式 animation-iteration-count

語(yǔ)法：animation-iteration-count: infinite | <number> infinite無(wú)限播放虐先，number播放次數(shù)

6，播放方向 animation-direction

語(yǔ)法：animation-direction:normal | alternate
其主要有兩個(gè)值：normal派敷、alternate

• normal（默認(rèn)值）蛹批，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放篮愉；
• alternate腐芍，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放试躏，第奇數(shù)次向反方向播放甸赃。

7，播放狀態(tài) animation-play-state

語(yǔ)法：animation-play-state:paused | running; paused暫停冗酿，running開(kāi)始
其中running是其默認(rèn)值埠对，主要作用就是類似于音樂(lè)播放器一樣，可以通過(guò)paused將正在播放的動(dòng)畫(huà)停下來(lái)裁替，也可以通過(guò)running將暫停的動(dòng)畫(huà)重新播放项玛，這里的重新播放不一定是從元素動(dòng)畫(huà)的開(kāi)始播放，而是從暫停的那個(gè)位置開(kāi)始播放弱判。另外如果暫停了動(dòng)畫(huà)的播放襟沮，元素的樣式將回到最原始設(shè)置狀態(tài)。

8昌腰，時(shí)間外屬性 animation-fill-mode

***語(yǔ)法：.class {animation-fill-mode: none | forwards | backwords | both; } ***
屬性值：