在寫完css3之變形後，感覺一下子對transform的使用清晰了很多，所以決定再把css3中其他重要新功能也梳理一下。本文將梳理transition和animation動畫功能

本文示例中使用到的html結構都是統一的，程式碼如下：

<style>
        #wrapper{
            width: 200px;
            height: 200px;
            border: 1px dotted red;
            margin: 100px auto;
            margin:100px auto
 
;
        }
        #rotate{
            width: 200px;
            height: 200px;
            background: orange;
            line-height: 200px;
            text-align: center;
       }
 </style>
<div id="wrapper">
        <div id="rotate">
            動畫特效
        </div>
</div>
 

       CSS3中可以實現動畫效果的屬性有Transition和Animation，這兩種功能都可以通過改變CSS中的屬性值來產生動畫效果。

transition(過渡)

作用：
       通過滑鼠單擊、獲得焦點等事件來平滑地以動畫效果改變CSS屬性值

語法：transition: property duration timing-function delay
       其中：
       transition-duration: 表示在多長時間內完成屬性值的平滑過渡
       transition-timing-function: 表示通過什麼方法來進行平滑過渡（具體值後面詳細介紹）
       transition-delay: 指定延遲多長時間後開始執行動畫
       transition-property: 表示對哪個CSS屬性進行平滑動畫過渡(可設定為all，則所有屬性值變化時均產生動畫效果)

擁有過渡效果的CSS屬性如下圖(即可以作為transition-property的值的屬性)：

在CSS中建立簡單的transition過渡效果可從以下三步來實現：
       第一，在預設樣式中宣告元素的初始狀態樣式；
       第二，宣告過渡元素最終狀態樣式，比如懸浮狀態；
       第三，在預設樣式中通過新增過渡函式，新增一些不同的樣式。

CSS程式碼如下：

#rotate{
            transition:transform 3s ease-in 0s;
        }
#rotate:hover{
            -webkit-transform: rotate(45deg);
        }

頁面效果如下：

animation(動畫)

語法：animations: name duration timing-function delay iteration-count;

       其中：

       animation-name: 用來呼叫在 @keyframes中已經定義好的動畫，其名稱必須與“@keyframes”定義的動畫名稱完全一致（區分大小寫）；none為其預設值，當值為 none 時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。

       animation-duration: 用來指定元素播放動畫所持續的時間，也就是完成從0%到100%一次動畫所需時間
        animation-timing-function: 用來設定動畫播放方式（具體值下面詳細介紹）

       animation-delay: 用於定義在瀏覽器開始執行動畫之前等待的時間。

       animation-iteration-count: 用來定義動畫的播放次數，可設定為具體數值，或者設定為infinite進行無限迴圈，預設為1

       animation-direction:用來設定動畫播放方向,其主要有兩個值：normal(預設值,每次迴圈總是向前移動)、alternate(動畫播放在第偶數次向前播放，第奇數次向反方向播放)

       animation-play-state:用來控制元素動畫的播放狀態,其主要有兩個值：running和paused。其中running是其預設值，主要作用就是類似於音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這裡的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設定狀態

       animation-fill-mode:定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。

Keyframes被稱為關鍵幀。在CSS3中其主要以“@keyframes”開頭，後面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

在CSS中建立簡單的animation動畫效果可以從以下幾個步驟來實現：
       第一，在預設樣式中宣告元素的初始狀態樣式；
       第二，在需要執行動畫的元素樣式中新增animation屬性；
       第三，在關鍵幀中宣告不同時間段的樣式規則

   在寫完css3之變形後，感覺一下子對transform的使用清晰了很多，所以決定再把css3中其他重要新功能也梳理一下。本文將梳理transition和animation動畫功能

本文示例中使用到的html結構都是統一的，程式碼如下：

<style>
        #wrapper{
            width: 200px;
            height: 200px;
            border: 1px dotted red;
            margin: 100px auto;
            margin:100px auto;
        }
        #rotate{
            width: 200px;
            height: 200px;
            background: orange;
            line-height: 200px;
            text-align: center;
       }
 </style>
<div id="wrapper">
        <div id="rotate">
            動畫特效
        </div>
</div>

       CSS3中可以實現動畫效果的屬性有Transition和Animation，這兩種功能都可以通過改變CSS中的屬性值來產生動畫效果。

transition(過渡)

作用：
       通過滑鼠單擊、獲得焦點等事件來平滑地以動畫效果改變CSS屬性值

語法：transition: property duration timing-function delay
       其中：
       transition-duration: 表示在多長時間內完成屬性值的平滑過渡
       transition-timing-function: 表示通過什麼方法來進行平滑過渡（具體值後面詳細介紹）
       transition-delay: 指定延遲多長時間後開始執行動畫
       transition-property: 表示對哪個CSS屬性進行平滑動畫過渡(可設定為all，則所有屬性值變化時均產生動畫效果)

擁有過渡效果的CSS屬性如下圖(即可以作為transition-property的值的屬性)：

在CSS中建立簡單的transition過渡效果可從以下三步來實現：
       第一，在預設樣式中宣告元素的初始狀態樣式；
       第二，宣告過渡元素最終狀態樣式，比如懸浮狀態；
       第三，在預設樣式中通過新增過渡函式，新增一些不同的樣式。

CSS程式碼如下：

#rotate{
           animation: wobble 5s ease .1s;
        }
@keyframes wobble {
          0% {
            margin-left: 0px;
            background:green;
          }
          40% {
            margin-left:150px;
            background:orange;
          }
          60% {
            margin-left: 75px;
            background: blue;
          }
          100% {
            margin-left: 100px;
            background: red;
          }
        }

頁面效果如下：

timing-function

       transition和animation中都一個timing-function屬性，該屬性值指的是過渡的“緩動函式”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，

       其主要取值是以下幾種函式名：