第八十三節，CSS3動畫效果

標籤：div   動畫效果   count   code   margin   color   order   nim   時間   

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>

 

[email protected]先聲明一個動畫主要畫面格。

//基本格式，“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        　　           自訂三次貝茲路徑

 

第八十三節，CSS3動畫效果