[CSS Animation] 1. 嗨,animation 初步探訪

CSS Animation 可以創造出非常多的動畫效果,此篇文章會很快速的帶您完成套用基本的 Animation 效果,而在後續的文章中,將會有更多的教學及範例。此篇文章會設定一個旋轉的動畫效果。

從上面的範例來看,我們將「旋轉」這個文字,做了一次 360 度的旋轉。主要透過 @keyframes ,以及 animation-nameanimation-duration 來達成。若沒有看到效果,可將滑鼠移過 CODEPEN 上,右下角會出現「RERUN」的按鈕,按下後,可重新執行效果。

CSS Animation 動畫原理

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

  • 動畫名稱:給定一個名稱,該名稱之後就可以套用在任何元素上。
  • 初始狀態:一個動畫的初始狀態,一般是 0%;然而,若沒有指定的話,初始狀態就會是元素本身原來的狀態。
  • 最終狀態:一個動畫的最終狀態,一般是 100%;然而,若沒有指定的話,動畫執行到最後時,就會倒轉回到元素的初始狀態。
  • 執行期間:從初始狀態執行到最終狀態時,要在多少時間完成。

透過以上的基本定義,就可以建立一個基本的 CSS 動畫了。當然,還可以設定的屬性還不止上述那些,我們將在後續的文章多做說明。

範例解說

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

animation 中的 @keyframes 動畫設定

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

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

3、讓某個元素套用 rotation 動畫(animation-name),並且設定執行期間為 5 秒(animation-duration):

div.-rotate{
  animation-name: rotation;
  animation-duration: 5s;
}

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

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of