動畫(animations)

新式的CSS3中就已經有包含動畫的可定義值，內容相當的完整。CSS動畫指的是使用以CSS定義為主的動畫效果，又可以分成以下兩類:

CSS3轉場/過渡(transitions): 主要以開始狀態、結束狀態與持續期間(duration)三種參數，以及可指定的漸變函數(transition timing function)，將DOM元素或網頁上的物件進行轉變。
CSS3動畫(animations): 又稱為關鍵影格(Keyframe)動畫，可以加入關鍵影格，提供許多動畫片段的組合。

轉場(Transition)

CSS 轉場允許您在給定的持續時間內平滑地更改屬性值。

將鼠標懸停在下面的紅色方塊上，查看轉場效果：

兩張圖片疊在一起，利用轉場方法，
將上面的圖片完全透明化，下面的圖片就展現出來。
將鼠標懸停在右邊的圖片上，查看轉場效果：

轉場用法

CSS 轉場允許您在給定的持續時間內平滑地更改屬性值。

要創建轉場效果，您必須指定兩件事：

要添加效果的 CSS 屬性
效果的持續時間

以下示例顯示了一個 100px * 100px 的紅色 <div> 元件。 <div> 元件還為 width 屬性指定了轉場效果，持續時間為 2 秒：

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

當指定的 CSS 屬性（寬度）更改值時，轉場效果將開始。

現在，當用戶將鼠標懸停在 <div> 元件上時，讓我們為 width 屬性指定一個新值：

div:hover {
  width: 500px;
}
</style>

CSS Transition

指定轉場的速度曲線

transition-timing-function 屬性指定了轉場效果的速度曲線。

transition-timing-function 屬性可以具有以下值：

ease - 指定一個緩慢開始，然後快速，然後緩慢結束的轉場效果（這是預設值）
linear - 指定從開始到結束具有相同速度的轉場效果
ease-in - 指定一個緩慢啟動的轉場效果
ease-out - 指定一個緩慢結束的轉場效果
ease-in-out - 指定緩慢開始和結束的轉場效果
cube-bezier(n,n,n,n) - 允許您在三次貝塞爾函數中定義自己的值

延遲轉場效果

transition-delay 屬性指定轉場效果的延遲（以秒為單位）。

轉場+變形

以下示例為轉換添加了轉場效果：

div {
  transition: width 2s, height 2s, transform 2s;
}

以下示例為轉場添加了變形效果, 請將鼠標懸停在紅色方塊：

轉場+變形

速記屬性轉場

CSS 轉場屬性可以一一指定，如下所示：

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

或使用速記屬性轉換：

div {
  transition: width 2s linear 1s;
}

CSS 動畫

CSS 允許在不使用 JavaScript 或 Flash 的情況下對 HTML 元素進行動畫處理！
要使用 CSS 動畫，首先必須為動畫指定一些關鍵影格。
關鍵影格保存元件在特定時間將具有的樣式。

Welcome to CSS animation! Welcome to CSS animation!

@keyframes 規則

當您在@keyframes 規則中指定 CSS 樣式時，動畫會在特定時間逐漸從當前樣式更改為新樣式。
要使動畫工作，您必須將動畫綁定到一個元件。

下例實現文本的水平滾動，達到走馬燈的效果:

<style>
div.animate {
  animation-name: example;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes example {
  from {transform:translatex(-100%);}
  to {transform:translatex(100%);}
}
</style>
<div id="animate" style="font-size:3vw">Welcome to CSS animation! Welcome to CSS animation!</div>

下面的示例將“example”動畫綁定到 <div> 元件。動畫將持續 4 秒，它會逐漸將 <div> 元件的背景顏色從“紅色”更改為“黃色”：

看效果

動畫速記屬性

下面的示例使用六個動畫屬性：

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用速記動畫屬性可以實現與上面相同的動畫效果：

div {
  animation: example 5s linear 2s infinite alternate;
}

DOM 動畫

創建動畫容器

使用一個簡單的網頁，含有容器元件。所有動畫元件都應該與該容器元件相對。

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id ="container">
  <div id ="animate">動畫在此進行</div>
</div>

</body>
</html>

設計元件樣式

容器元件應使用 style = "position: relative" 創建。
動畫元件應使用 style = "position: absolute" 創建。

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

動畫程式碼

JavaScript 動畫是經由元件樣式進行編程來實現的。
這些更改由計時器調用。當定時器間隔小時，動畫看起來是連續的。

id = setInterval(frame, 5);

function frame() {
  if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */
  }
}

例如:

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}

動畫(animations)

轉場(Transition)

轉場用法

指定轉場的速度曲線

延遲轉場效果

轉場+變形

速記屬性轉場

CSS 動畫

@keyframes 規則

動畫速記屬性

DOM 動畫

創建動畫容器

設計元件樣式

動畫程式碼

例題: animation.html

參考資料