第八十三節，CSS3動畫效果

CSS3動畫效果

 

學習要點：
1.動畫簡介
2.屬性詳解
3.簡寫和版本

本章主要探討HTML5中CSS3的動畫效果，能夠經過類 Flash那樣的關鍵幀模式控制運行。

 

一．動畫簡介

    CSS3提供了類 Flash關鍵幀控制的動畫效果，經過animation屬性實現。

    animation實現動畫效果主要由兩個部分組成：

    1.經過類 Flash動畫中的關鍵幀聲明一個動畫；

    2.在animation屬性中調用關鍵幀聲明的動畫。

    CSS3提供的animation是一個複合屬性，它包含了不少子屬性。以下表所示：

                 屬性                                    　　　　說明

    　　animation-name　　　　　　　　　　　用來指定一個關鍵幀動畫的名稱，這個動畫

　　　　　　　　　　　　　　　　　　　　　　  名必須對應一個@keyframes規則。CSS加

　　　　　　　　　　　　　　　　　　　　　　  載時會應用animation-name指定的動畫，

　　　　　　　　　　　　　　　　　　　　　　  從而執行動畫。

 

       animation-duration       　　　　　　　　用來設置動畫播放所需的時間

      animation-timing-function 　　　　　　  用來設置動畫的播放方式

           animation-delay         　　　　　　    用來指定動畫的延遲時間

      animation-iteration-count 　　　　        用來指定動畫播放的循環次數

         animation-direction      　　　　　　   用來指定動畫的播放方向

        animation-play-state       　　　　　　 用來控制動畫的播放狀態

         animation-fill-mode       　　　　　　  用來設置動畫的時間外屬性

              animation             　　　　　　　　以上的簡寫形式

除了這9個屬性以外，動畫效果還有一個重要的屬性，就是關鍵幀屬性：@keyframes。它的做用是聲明一個動畫，而後在animation調用關鍵幀聲明的動畫。

       //基本格式，「name」可自定義

       @keyframes name {

              /*...*/

       }

 

二．屬性詳解
在講解動畫屬性以前，先建立一個基本的樣式。

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

1.@keyframes先聲明一個動畫關鍵幀。

//基本格式，「name」可自定義

       @keyframes name {

              /*...*/

       }

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
    }
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

2.animation-name 調用@keyframes關鍵幀動畫

           屬性值                                　　說明

            none         　　　　　　　　默認值，沒有指定任何動畫

            關鍵幀動畫名稱         　　　 是由@keyframes指定建立的動畫名稱

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

以上經過關鍵幀的方式，這裏插入了三個關鍵幀。0%表示動畫開始的地方，50%表示動畫進行一半時，100%表示動畫結束時

3.animation-duration設置動畫播放的時間

就是動畫用多長時間執行完成

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

4.animation-timing-function設置緩動 

           屬性值                                 說明

            ease               　　　　　　默認值，元素樣式從初始狀態過渡到終止狀態時速度由

                   　　　　　　　　　　  快到慢，逐漸變慢。等同於貝塞爾曲線(0.25,0.1,

                         　　　　　　　　  0.25, 1.0)

 

           linear             　　　　      元素樣式從初始狀態過渡到終止狀態速度是恆速。等同

                         　　　　　　　　 於貝塞爾曲線(0.0,0.0, 1.0, 1.0)

 

         ease-in             　　　　     元素樣式從初始狀態過渡到終止狀態時，速度愈來愈

                 　　　　　　　　         快，呈一種加速狀態。等同於貝塞爾曲線(0.42, 0,

                         　　　　　　       1.0, 1.0)

 

        ease-out                　　　　元素樣式從初始狀態過渡到終止狀態時，速度愈來愈

                 　　　　　　　　　　   慢，呈一種減速狀態。等同於貝塞爾曲線(0,0,0.58,

                         　　　　　　　　1.0)

 

      ease-in-out                　　   元素樣式從初始狀態過渡到終止狀態時，先加速，再減

                         　　　　　　　　速。等同於貝塞爾曲線(0.42,0, 0.58, 1.0)

 

     cubic-bezier        　　           自定義三次貝塞爾曲線

 

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
    /*設置緩動*/
    animation-timing-function: linear;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}


<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

 

5.animation-delay 設置延遲時間

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
    /*設置緩動*/
    animation-timing-function: linear;
    /*設置延遲時間*/
    animation-delay: 1s;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}


<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

6.animation-iteration-count設置循環次數 

        屬性值                                      說明

 

          次數              　　　　　　　　默認值爲1

 

        infinite          　　　　　　　　 表示無限次循環

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
    /*設置緩動*/
    animation-timing-function: linear;
    /*設置延遲時間*/
    animation-delay: 1s;
    /*設置循環次數*/
    animation-iteration-count: infinite;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}


<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

7.animation-direction 設置緩動方向交替

          屬性值                                      說明

         normal           　　　　　　　　默認值，每次播放向前

       alternate         　　　　　　      一次向前，一次向後，一次向前，一次向後這樣交替

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
    /*設置緩動*/
    animation-timing-function: linear;
    /*設置延遲時間*/
    animation-delay: 1s;
    /*設置循環次數*/
    animation-iteration-count: infinite;
    /*設置緩動方向交替*/
    animation-direction: alternate;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}



<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

8.animation-play-state設置中止播放動畫 

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
    /*設置緩動*/
    animation-timing-function: linear;
    /*設置延遲時間*/
    animation-delay: 1s;
    /*設置循環次數*/
    animation-iteration-count: infinite;
    /*設置緩動方向交替*/
    animation-direction: alternate;
    /*設置中止播放動畫*/
    animation-play-state: paused;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}



<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

9.animation-fill-mode設置結束後不在返回 

         屬性值                                      說明

          none           　　　　　　　　 默認值，表示按預期進行和結束

       forwards          　　　　　　    動畫結束後繼續應用最後關鍵幀位置，即不返回

     backforwards        　　　　　　 動畫結束後迅速應用起始關鍵幀位置，即返回

         both           　　　　　　        根據狀況產生forwards或backforwards的效果

 

//both須要結合，次數和播放方向

animation-iteration-count: 4;

animation-direction: alternate;

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*調用@keyframes關鍵幀動畫*/
    animation-name: myani;
    /*設置動畫播放的時間*/
    animation-duration: 2s;
    /*設置緩動*/
    animation-timing-function: linear;
    /*設置延遲時間*/
    animation-delay: 1s;
    /*設置循環次數*/
    /*animation-iteration-count: infinite;*/
    /*設置緩動方向交替*/
    animation-direction: alternate;
    /*設置中止播放動畫*/
    /*animation-play-state: paused;*/
    animation-fill-mode:forwards;
}
/*@keyframes先聲明一個動畫關鍵幀。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}



<div>
    <p>是一部由北青傳媒股份</p>
</div>

 

六．簡寫和版本
簡寫形式完整版
animation: myani(調用關鍵幀名稱) 1s(設置動畫播放的時間) ease(設置緩動) 2(設置延遲時間) alternate(設置循環次數) 0s(設置緩動方向交替) both(設置結束後不在返回);
animation: myani 1s ease 2 alternate 0s both;

 

爲了兼容舊版本，須要加上相應的瀏覽器前綴，版本信息以下表：

                           　　　　Opera     　　Firefox  　　　Chrome        　　Safari       　　 IE

        支持需帶前綴            15 ~ 29  　　5~ 15  　　     4 ~ 42             　4 ~ 8        　　 無

        支持不帶前綴             無         　　 16+         　　 43+                    無        　　　　10.0+

 

兼容完整版，Opera在這個屬性上加入webkit，因此沒有-o-

-webkit-animation:myani 1s ease 2 alternate 0s both; 
-moz-animation:myani 1s ease 2 alternate 0s both; 
-ms-animation:myani 1s ease 2 alternate 0s both; 
transition: all 1s ease 0s;

 

 

@keyframes也須要加上前綴

@-webkit-keyframes myani {...} 
@-moz-keyframes myani {...} 
@-o-keyframes myani {...} 
@-ms-keyframes myani {...} 
keyframes myani {...}