轉(zhuǎn)換（transform）

如大家了解的一樣，轉(zhuǎn)換分為2D轉(zhuǎn)換和3D轉(zhuǎn)換。利用CSS3的轉(zhuǎn)換功我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸，并且能結(jié)合動(dòng)畫可以實(shí)現(xiàn)許多酷炫的效果。

使用轉(zhuǎn)換功能需要使用：

{
    -webkit-transform：；//Chrome Safari
       -moz-transform：；//Firefox
        -ms-transform：；//for IE9
         -o-transform：；//Opera
            transform：；
}

值得注意的是，這里設(shè)置之后，其尺寸改變不會(huì)影響到別的元素，像是脫離了文檔流一樣設(shè)置了relative，然而在元素上設(shè)置margin等屬性仍然會(huì)在其本來(lái)的盒子上影響到文檔流別的元素。一言以蔽之，設(shè)置transform后未脫離文檔流。

2D轉(zhuǎn)換

• translate（）——移動(dòng)
• rotate（）——旋轉(zhuǎn)
• scale（）——縮放
• skew（）——翻轉(zhuǎn)，根據(jù)給定的水平線和垂直線參數(shù)翻轉(zhuǎn)角度
• matrix（）
• transform-origin（）

translate（）

元素根據(jù)給定的坐標(biāo)（x，y）位置參數(shù)從其位置移動(dòng)。

注意，其實(shí)使用本方法就像設(shè)置relative一樣，相對(duì)于原來(lái)位置偏移，且原位置仍然占據(jù)空間。

rotate（）

元素順時(shí)針旋轉(zhuǎn)給定角度（正值），逆時(shí)針則設(shè)置負(fù)值。eg：rotate（40deg）

旋轉(zhuǎn)的元素，占據(jù)的空間仍然未變，像設(shè)置了定位relatvie一樣，在此基礎(chǔ)上旋轉(zhuǎn)，未脫離文檔流。

scale（）

元素的尺寸會(huì)根據(jù)設(shè)置得scale（）方法增加或減少。改變后他可能會(huì)覆蓋在其他元素上。

如果只寬度或者高度尺寸變化，則可使用scaleX（）或者scaleY（）。

div
{
    -webkit-transform: scale(2,4);  /* Safari 和 Chrome */
    -moz-transform: scale(2,4); /* Firefox */
    -ms-transform: scale(2,4);  /* IE 9 */
    -o-transform: scale(2,4);   /* Opera */
    transform: scale(2,4);
}

skew（）
skew（x-angle，y-angle），沿X，Y偏轉(zhuǎn)角度；
如果只給定一個(gè)值，即skew（angle），則會(huì)只向X軸偏轉(zhuǎn)，但是我試了這樣的寫法skew（，angle），結(jié)果整個(gè)元素都不見(jiàn)了。求大家指教。
如果想只沿一個(gè)軸偏轉(zhuǎn)，可以使用skewX（）或者skewY（）。

matrix（）
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。

transform-origin（）

transform-origin屬性允許您改變被轉(zhuǎn)換元素的位置。2D 轉(zhuǎn)換元素能夠改變?cè)?x 和 y軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。

語(yǔ)法
transform-origin: x-axis y-axis z-axis;

3D轉(zhuǎn)換

• rotateX（）
• rotateY（)

需要注意的是：opera不支持3D轉(zhuǎn)換

transition（過(guò)渡）

兼容性（不支持IE9及之前版本）

{
    -webkit-transition: width 2s;   /* Safari 和 Chrome */
    -moz-transition: width 2s;  /* Firefox 4 */
    -o-transition: width 2s;    /* Opera */
    transition: width 2s;
}

過(guò)渡屬性

• transtion
• transtion-property
• transtion-durtion
• transtion-timing-function
• transtion-delay

如何工作？
SS3 過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：

• 希望添加效果的CSS屬性
• 效果時(shí)長(zhǎng)
  通常，該屬性會(huì)結(jié)束JS和偽類使用
  eg：

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

動(dòng)畫（animation）

CSS3動(dòng)畫屬性

• @keyframes——規(guī)定動(dòng)畫
• animation——所有動(dòng)畫簡(jiǎn)寫屬性，除animation-play-state
• animation-name——規(guī)定@keyframes動(dòng)畫名稱
• animation-durtion——規(guī)定一個(gè)動(dòng)畫花費(fèi)的時(shí)間（ms或s），默認(rèn)0
• animation-timing-function——規(guī)定動(dòng)畫的速度曲線，默認(rèn)“ease”
• animation-delay——規(guī)定動(dòng)畫何時(shí)開(kāi)始，默認(rèn)0
• animation-iteration-count——規(guī)定動(dòng)畫播放次數(shù)，默認(rèn)1
• animation-direction——規(guī)定動(dòng)畫是否在下一周期逆向播放，默認(rèn)normal
• animation-play-state——規(guī)定動(dòng)畫是否正在運(yùn)行或暫定默認(rèn)“running”
• animation-fill-mode——規(guī)定對(duì)象時(shí)間之外的狀態(tài)

兼容（IE9及之前版本不支持）

    -webkit-animation:動(dòng)畫名;
       -moz-animation:動(dòng)畫名;
         -o-animation:動(dòng)畫名;
            animation:動(dòng)畫名;
    
    
    相應(yīng)的動(dòng)畫幀：
    @keyframes 動(dòng)畫名
    {

    }

   @-moz-keyframes 動(dòng)畫名 /* Firefox */
    {

    }

  @-webkit-keyframes 動(dòng)畫名 /* Safari 和 Chrome */
   {

   }

  @-o-keyframes 動(dòng)畫名 /* Opera */
  {

  }
    

眾所周知，需在 CSS3 中創(chuàng)建動(dòng)畫，就得學(xué)習(xí)@keyframes 規(guī)則。@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。
那么什么是動(dòng)畫呢？

動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。我們可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。最好用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。0% 是動(dòng)畫的開(kāi)始，100% 是動(dòng)畫的完成。始終定義 0% 和 100% 選擇器。能得到最佳的瀏覽器支持。

animation-timing-function

• linear：勻速
• ease：低速開(kāi)始，加快，結(jié)束前變慢
• ease-in：低速開(kāi)始
• ease-out：低速結(jié)束
• ease-in-out：低速開(kāi)始和結(jié)束
• cubic-bezier（n，n，n）：未知

animation-direction

• normal：默認(rèn)（正向）
• alternate：反向

animation-iteration-count

• n：播放次數(shù)
• infinite：無(wú)限播放

animation-play-state（）

• paused
• running

animation-fill-mode

• none:不改變默認(rèn)行為
• forwards：動(dòng)畫完成后，保持最后一個(gè)屬性值（最后一個(gè)關(guān)鍵幀定義）
• backwards：在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開(kāi)始屬性值（在第一個(gè)關(guān)鍵幀中定義）。
• both：向前和向后填充模式都被應(yīng)用。

動(dòng)畫實(shí)例

一個(gè)簡(jiǎn)單的天氣預(yù)報(bào)模型，也是我在微博上看到的，就下載源碼研究了一下。供大家學(xué)習(xí)參考。
HTML結(jié)構(gòu)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aimation</title>
    <link rel="stylesheet"  href="weather.css" />
</head>
<body>
    <div class="container">
        <div class="sunny"></div>
        <div class="cloudy"></div>
        <div class="rainy"></div>
        <div class="rainbow"></div>
        <div class="starry"></div>
        <div class="stormy"></div>
        <div class="snowy"></div>
    </div>
</body>
</html>

具體可以前去純CSS天氣預(yù)報(bào)看看效果和源碼。