之前的網(wǎng)頁(yè)實(shí)現(xiàn)動(dòng)畫效果必須依賴Flash或js，CSS3動(dòng)畫效果屬性主要分為三類：過渡、變換、動(dòng)畫。但是這些CSS屬性在Android和iOS上使用都必須使用私有前綴-webkit-。

• 瀏覽器對(duì)動(dòng)畫的兼容性支持：

  
  
  兼容性.png

1、過渡

要實(shí)現(xiàn)這個(gè)效果，必須考慮兩點(diǎn)，變換樣式使用的CSS屬性和變換樣式變化的時(shí)長(zhǎng)，設(shè)置過渡要用CSS屬性transition，語(yǔ)法形式如下：

 -webkit-transition: 屬性名稱  過渡時(shí)間  速度曲線  過渡延遲時(shí)間

其中，前面兩個(gè)參數(shù)是必填的，后面兩個(gè)參數(shù)是可選的，示例：

            div {
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background-color: cadetblue;
                /* 設(shè)置寬度和高度的變換時(shí)間為2s */
                -webkit-transition: width 2s, height 2s;
            }
            div:hover {
                width: 200px;
                height: 200px;
            }

當(dāng)鼠標(biāo)懸浮時(shí)，div的高度和寬度變化的過渡，如果所有的屬性變化的時(shí)間一樣長(zhǎng)，過渡屬性還可以設(shè)置為：

-webkit-transition:all 2s;

至于速度曲線，它的取值說明如下：

2D以及3D的變換

CSS中的變換屬性transform可以動(dòng)態(tài)的控制一些HTML標(biāo)簽元素，讓其在頁(yè)面進(jìn)行移動(dòng)、縮放、傾斜、或結(jié)合過渡效果產(chǎn)生一些動(dòng)畫效果。

2D變換

• 平移：需要使用translate方法，指定中心點(diǎn)的x,y坐標(biāo)的偏移量，值可以是負(fù)數(shù)，表示反方向移動(dòng)元素，元素平移后，它原有的位置繼續(xù)保留。

-webkit-transform: translate(50px, 100px);//水平向右偏移50像素，垂直向上偏移100像素

• 旋轉(zhuǎn)：需要使用rotate方法，角度的單位用deg表示，默認(rèn)的是順時(shí)針，值可以使用負(fù)數(shù)，表示逆時(shí)針旋轉(zhuǎn)

-webkit-transform: rotate(30deg); //繞中心點(diǎn)順時(shí)針旋轉(zhuǎn)30度

• 縮放：需要使用scale方法，指定寬度和高度的縮放比例，比例可以是小數(shù)。

-webkit-transform: scale(0.5, 0.5); //寬高縮放一半

• 傾斜：需要使用skew方法，指定相對(duì)于x軸和y軸的傾斜角度

-webkit-transform: skew(10deg, 10deg); //相對(duì)于X軸和Y軸都傾斜10度

3D變換

transform屬性的3D變換主要是讓元素繞X軸，Y軸進(jìn)行的。

• X軸旋轉(zhuǎn)：需要使用rotateX方法，指定旋轉(zhuǎn)的角度，單位為deg，默認(rèn)為順時(shí)針旋轉(zhuǎn)，值為負(fù)數(shù)則為逆時(shí)針。

-webkit-transform: rotateX(120deg); //繞X軸順時(shí)針旋轉(zhuǎn)120度

• Y軸旋轉(zhuǎn)：使用方法與rotateX一樣

-webkit-transform: rotateY(120deg); //繞Y軸順時(shí)針旋轉(zhuǎn)120度

CSS3中的一些動(dòng)畫控制

CSS中除了支持漸變、過渡和變換旋轉(zhuǎn)的效果，還支持更加強(qiáng)大的動(dòng)畫效果實(shí)現(xiàn)，它提供了一種動(dòng)畫控制屬性animation，可以用來(lái)設(shè)置更加復(fù)雜的動(dòng)畫效果，例如：控制動(dòng)畫的動(dòng)畫次數(shù)，逆向動(dòng)畫，動(dòng)畫的播放和暫停等
要使用animation動(dòng)畫控制屬性，首先需要定義動(dòng)畫規(guī)則，動(dòng)畫的定義規(guī)則使用的是@keyframes規(guī)則，用它來(lái)定義動(dòng)畫中的關(guān)鍵幀，它的語(yǔ)法形式有兩種：一種是只設(shè)置起始和終點(diǎn)的動(dòng)畫幀，另外一種是使用百分比來(lái)細(xì)化動(dòng)畫幀

• 只設(shè)置起始的動(dòng)畫幀：

@-webkit-keyframs  寫上你的動(dòng)畫規(guī)則名稱{
  from{
    // CSS屬性的設(shè)置
  }
  to {
   // CSS屬性的設(shè)置
  }
}

• 百分比定義動(dòng)畫幀：

@-webkit-keyframes 寫上你的動(dòng)畫規(guī)則名稱 {
  0% {
    // CSS屬性的設(shè)置
   }
  25% {
    // CSS屬性的設(shè)置
  }
  50% {
    // CSS屬性的設(shè)置
  }
  100% {
    // CSS屬性的設(shè)置
  }
}

定義好動(dòng)畫幀，就可以使用animation屬性進(jìn)行動(dòng)畫的控制了，代碼如下：

-webkit-animation: name duration timing-function delay iteration-count direction'

• name：用@keyframes已定義好的動(dòng)畫規(guī)則名稱
• duration：動(dòng)畫花費(fèi)的時(shí)間
• timing-function：動(dòng)畫的速度曲線，如:linear...
• delay：動(dòng)畫的延遲時(shí)間
• iteration-count：動(dòng)畫的播放次數(shù)
• direction：動(dòng)畫逆向播放，默認(rèn)值為normal，alternate表示動(dòng)畫的輪流反向播放
  示例：

        .img-box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border-radius:150px;
        }
        .img-box img {
            width: 300px;
            height: 300px;
            border-radius:50%;
            overflow: hidden;
        }
        @-webkit-keyframes myAnimation{
            from{
              -webkit-transform: rotate(0deg);
            }
            to{
              -webkit-transform: rotate(360deg);
            }
        }
        
        .myRotate {
            -webkit-animation: myAnimation 9s linear 0s 10 ;
        }

@keyframes定義的動(dòng)畫規(guī)則.gif