[Back To Basic] CSS Animations

使用純 css 做動畫。

Animations

• 可讓元素從一個樣式逐漸改變成另一個樣式
• 很多 css 屬性皆可應用
• 動畫次數可指定
• 影格的概念很重要

@keyframes

@keyframes 影格名稱 {

  from {

    background-color: yellow;

  }

  to {

    background-color: blue;

  }

}

• 從from變化到to
• 綁定影格到元素上

animation-name: 影格名稱;

• 指定影格總秒數

animation-duration: 秒數; (預設為0秒，所以沒有設定就不會有動畫)

animation-delay

• 動畫延遲n秒後開始
• 可以是負值

animation-iteration-count

• 動畫執行的次數 e.g. 1 2 3...
• 無限: infinite

animation-direction

指定動畫的方向

• normal(預設值): 向前
• reverse: 倒轉
• alternate: 先正常播放後倒轉
• alternate-reverse: 先倒轉後正常播放

animation-timing-function

速度曲線

• ease(預設值): 慢 快 慢
• linear: 中 中 中
• ease-in: 慢 中 中
• ease-out: 中 中 慢
• ease-in-out: 慢 漸快 漸慢 慢
• cubic-bezier(n,n,n,n): 自行指定貝茲曲線，決定速度

animation-fill-mode

在影格沒有播放時，可指定一個樣式

• none(預設值)

無任何樣式

• forwards

保留最後一個影格的樣式

• backwards

保留第一個影格的樣式

• both

遵循 forwards 和 backwards 的規則，延展動畫的屬性值

animation(縮寫)

動畫名稱, 動畫總時間 速度曲線 動畫延遲 動畫次數 動畫方向 動畫填滿模式 播放狀態

name duration timing-function delay iteration-count direction fill-mode play-state;

source code