CSS3之動畫得使用

動畫得基本使用

動畫可以通過設置多個節點來精確控制一個或者一組動畫，常用來實現複雜的動畫效果。

動畫與過渡的區別：

1. 過渡必須觸發，需要兩個狀態的改變。
2. 動畫可以一直運行下去，不需要觸發。實現效果與過渡差不多

用一個動畫的基本步驟：
3. 通過@keyframes指定動畫序列
4. 通過百分比或者from/to將動畫分割成多個節點
5. 在各個節點中分別定義樣式
6. 通過animation將動畫應用於相應的元素

   div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        /* 使用動畫
           animation 動畫名稱 動畫時間 動畫次數
           infinite 無限循環*/
        animation: myanim 2s infinite;
    }

    /* 1. 聲明動畫
        @keyframes 動畫名稱 */
    @keyframes myanim {
        from {
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
        }
        to {
            width: 300px;
            height: 300px;
            transform: rotate(300deg);
        }
    }

動畫得八大參數

animation是一個複合屬性，一共有8個參數

1. animation-name:動畫名稱，由@keyframes定義的

   animation-name: play
   

2. animation-duration：動畫的持續時間

   animation-duration: 3s;
   

3. animation-timing-function：動畫的過渡類型

     linear
     ease(默認值)
     steps(10)
     動畫效果transition的類似
     animation-timing-function: steps(10);
   

4. animation-delay：動畫的延遲時間

    animation-delay: 2s;
   

5. animation-iteration-count：動畫的循環次數 infinite

     /*    特殊值: infinite 無限次 */
     animation-iteration-count: infinite;
   

6. animation-direction：設置動畫在循環中是否反向運動

      /*    normal 默認正常, 從 from 到 to
           alternate 從 from 到 to, 再從 to 到 from
     */
     animation-direction: normal;
     animation-direction: alternate;
   

7. animation-fill-mode：設置動畫時間之外的狀態

    /*    forwards 停留在最終狀態 */
      animation-fill-mode: forwards; 
   

8. animattion-play-state:設置動畫的狀態。

     /* 8. 動態狀態
          paused 表示讓當前動態停止 */
      animation-play-state: paused;
   

動畫合寫順序沒有要求，但是延時要放在動畫時間後面
例如：

/* 動畫合寫: 順序沒有要求, 只是延時要放在動畫時間後面 */
      /*animation: 動畫名稱 動畫時間 動畫次數 動畫方向 動畫效果 */
      animation: play 2s infinite alternate linear;

動畫函數庫

https://daneden.github.io/animate.css/
使用庫中的動畫：

方法1：
正常的方式使用

 div {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      /* 使用動畫 */
      /*animation: flash 2s infinite;*/
    }

方法2：

該動畫庫可以通過添加類名來使用動畫函數庫
1. animated 添加動畫時間， 讓動畫停留在最終狀態
2. 添加動畫類, 指定具體動畫的名稱

<div class="animated bounceInUp"></div>