5.1 第一個 animation

相關 CSS

• @keyframes：建立一個動畫效果的名稱，然後創造動畫影格。

• animation-name：某個動畫效果的名稱。

• animation-duration：動畫效果要執行的「期間」。

先瞭解這三樣東西，就可以至少將動畫效果套用至指定元素。

CSS Animation 動畫原理

首先，我們必須要先瞭解在製作 CSS 動畫時的幾個基本觀念：

• 動畫名稱：給定一個名稱，然後就可以套用在任何元素上。

• 初始狀態：一個動畫的初始狀態，一般是 0%；然而，若沒有指定的話，初始狀態就會是元素本身原來的狀態。

• 最終狀態：一個動畫的最終狀態，一般是 100%；然而，若沒有指定的話，動畫執行到指定的最後百分比時，就會倒轉回到元素的初始狀態。

• 執行期間：從初始狀態執行到最終狀態時，要在多少時間完成。

透過以上的基本定義，就可以建立一個基本的 CSS 動畫了。

第一個 animation 解說

1、動畫名稱、初始狀態、最終狀態，程式碼的撰寫方式，如下圖：

2、設定一個名稱叫做 rotation 的動畫，初始狀態(0%)時，設定 transform 為 rotate(0deg)；最終狀態(100%)時，設定 transform 為 rotate(360deg)，如下程式碼：

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3、讓某個元素套用由 @keyframes 做好的 rotation 動畫( animation-name )，並且設定執行期間為 5 秒( animation-duration )：

div.img_block{
  /*  套上動畫效果 */
  animation-name: rotation;
  animation-duration: 5s;
}

例：第一個 animation - 旋轉 360 度

這樣就完成了一個基本的動畫了。另外 0% 及 100% 有各自的保留字，故 0% 可改寫成用 from 來替代；100% 可改寫成用 to 來替代。

試著將 0% 改成 from、將 100% 改成 to。

也試著將 100% 改成 50% 觀察。(會倒轉回去)