動畫簡易教程

css動畫簡易教程

對於頁面來說,動畫真是太有用了!

開發頁面的時候,總是會用上動畫.使的網站的交互性更加的完善.很多時候會忘記使用的流程,本文作爲開發筆記 方便使用.

1.Transition

  .con {
      font-size: 16px
    }

    .con:hover {
      font-size: 40px
    }     

  <span class="con">
    anim
  </span>

上面是一個演示,當鼠標放在文字上,文字會迅速變大,上面是很簡單的代碼.

   .con {
      font-size: 16px;
      transition: 1s;
    }

transition的作用在於，指定狀態變化(這裏指的是時間)

由於是簡易教程 所有其他的屬性不展開講 展開那可能可以寫一本書
所有支持的屬性請點擊鏈接
這邊有一些示例

transition侷限性

1. 需要事件觸發
2. 事件是一次性的
3. 無法定義中間狀態
4. 一條transition只能定義一個屬性

Animation

爲了解決上述的問題 於是就有了強大的Animation
可以下結論:Animation就是爲了解決這些問題而存在的

  .con {
      font-size: 16px;
      transition: 1s;
    }

    .con:hover {
      /* font-size: 40px */
      animation: 1s scla;
    }

    @keyframes scla {
      from {
        font-size: 16px;
      }
      to{
        font-size: 40px
      }
    }

上面是最簡單的例子

1. 不需要事件觸發

  .con {
      font-size: 16px;
      animation: 1s sc;
    }

2. 事件的循環次數可以自定義

  .con {
      font-size: 16px;
      animation: 1s sc infinite;
    }

無限播放
3. 可以控制中間狀態

 .con {
  font-size: 16px;
  animation: 1s sc forwards;
}

保留最後的狀態

4. 能定義多個屬性

  @keyframes sc {
      from {
        font-size: 16px;
        background-color: #fff;
      }
      to{
        font-size: 40px;
        background-color: #000;
        color: #fff

      }
    }

TODO…