Zi 字媒體

此篇文章瀏覽量： 2,448 CSS Animation 可以創造出非常多的動畫效果，此篇文章會很快速的帶您完成套用基本的 Animation 效果，而在後續的文章中，將會有更多的教學及範例。此篇文章會設定一個旋轉的動畫效果。 從上面的範例來看，我們將「旋轉」這個文字，做了一次 360 度的旋轉。主要透過 @keyframes ，以及 animation-name、animation-duration 來達成。若沒有看到效果，可將滑鼠移過 CODEPEN 上，右下角會出現「RERUN」的按鈕，按下後，可重新執行效果。 CSS Animation 動畫原理 首先，我們必須要先瞭解在製作 CSS 動畫時的幾個基本觀念： 動畫名稱：給定一個名稱，該名稱之後就可以套用在任何元素上。 初始狀態：一個動畫的初始狀態，一般是 0%；然而，若沒有指定的話，初始狀態就會是元素本身原來的狀態。 最終狀態：一個動畫的最終狀態，一般是 100%；然而，若沒有指定的話，動畫執行到最後時，就會倒轉回到元素的初始狀態。 執行期間：從初始狀態執行到最終狀態時，要在多少時間完成。 透過以上的基本定義，就可以建立一個基本的 CSS 動畫了。當然，還可以設定的屬性還不止上述那些，我們將在後續的文章多做說明。 範例解說 1、動畫名稱、初始狀態、最終狀態，程式碼的撰寫方式，如下圖： 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 來替代。 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet