CSS動畫：使用這17種選項增強網站功能

網頁載入時，吸引人的動畫能牢牢抓住你的視線。無縫過渡，引導您輕鬆瀏覽網站內容。當你與應用程式上的按鈕互動時，意想不到的色彩和動態效果迸發出來。

這些元素雖然微妙，卻能極大地影響你對品牌的認知和整體數字體驗。那麼，是什麼讓這些引人入勝的細節栩栩如生呢？通常，這需要 CSS 動畫的幫助。

在本指南中，我們將幫助您實現這一目標：

• CSS 和 CSS 動畫入門
• 嘗試 CSS 動畫的主要原因
• 採用 CSS 動畫的幾個障礙（附解決方案）
• 可用於應用程式或網站的 17 種 CSS 動畫範例
• 如何開始在網站中新增 CSS

認識 CSS

CSS 是層疊樣式表的簡稱。

CSS 是一種程式碼語言，它規定了網站或應用程式中圖形和內容元素的外觀和操作方式。CSS 對於自定義顏色和字型、頁面元素的定位和間距以及建立動畫都非常有用。有些 CSS 動畫 “純粹 ”由 HTML（超文字標記語言）和 CSS 程式碼構建而成，有些 CSS 動畫則結合了其他型別的程式碼（如 JavaScript）或現有媒體（如 GIF）。

CSS 誕生於 20 世紀 90 年代初，從 CSS1 到 CSS2 再到 CSS3（目前廣泛使用的版本）。在本文中，我們將按照慣例，在提及最新版本時使用 “CSS ”一詞。

HTML 就像房屋的地基和框架，沒有地基和框架，房屋就無法存在。而 CSS 則通過油漆、飾面和裝飾來改變房屋，賦予其獨特的風格和功能。

CSS 動畫構件

CSS 動畫使用 CSS 程式碼將各種屬性和值串聯起來，使螢幕上的元素動起來。

CSS 屬性是動畫的組成部分，如背景、邊框半徑、字型、邊距、運動型別（如旋轉或漸變）等。值通過定義顏色、對齊方式、大小、時間長度、方向、速度等來填充這些動畫屬性的細節。

下面我們以常用的 @keyframes 規則中的元素為例，看看屬性和值是如何協同工作的，該規則定義了整個動畫序列中的 CSS 過渡：

• animation-name 屬性給出了動畫的名稱。
• animation-duration 屬性概述了動畫的長度。值通常以秒（0 秒、4 秒等）為單位顯示。
• animation-delay 屬性指定了動畫開始的延遲時間。其值也以秒為單位（-2 秒、5 秒等）。
• animation-iteration-count 屬性指定動畫執行的次數。該值表示你希望動畫重複多少次；例如，infinite-alternate 將使動畫永遠執行下去。
• animation-direction 屬性說明動畫的播放方式。值包括 normal（正向）、reverse、alternate 等。
• animation-timing-function 屬性概括了動畫的速度曲線。值包括 ease-in-out，以建立平緩的開始和結束；cubic-bezier，以建立外觀複雜的曲線等。
• animation-fill-mode 屬性定義了動畫不播放時元素的外觀。值包括 forwards 保留上一個關鍵幀設定的值等。

現在將所有內容整合在一起！在 W3Schools 提供的這個示例中，我們將一個動畫（名為 example）附加到了 <div> 元素上。動畫開始後，將持續 4 秒，同時背景將從紅色過渡到黃色：

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(注：這只是一個例子。關鍵幀動畫並不是建立 CSS 動畫的唯一方法，而且它們並不與所有瀏覽器版本相容，請繼續閱讀，瞭解更多有關相容性的見解和技巧。）

實施 CSS 動畫的 3 個絕佳理由

從為令人難忘的互動提供動力，到確保以現代人期望的速度進行互動，CSS 動畫為數字體驗增添了許多亮點–對你和你的客戶或訪客來說都是如此。

創造獨特的故事和體驗

網站充當數字廣告牌的時代已經一去不復返了。

在全球經濟中，網站和應用程式是您講述品牌故事的最佳機會。

為什麼要注重品牌故事？因為一個好的故事能讓您的品牌與眾不同，吸引理想受眾的注意力，建立持久的聯絡，最重要的是，它還能激勵人們採取行動。

而您的故事在一定程度上是建立在您的使用者體驗中包含的互動元素之上的。

CSS 動畫就是要創造獨特的體驗，與使用者一起反應和移動，與品牌故事建立默契和互動。

更快捷地進行改造和維護

CSS 是一種有組織且簡短的編碼語言。在網路開發領域，它被稱為簡潔。對於簡單的應用程式和網站專案來說，樣式表通常可以保持在最低水平。

這就意味著，當需要更新專案、進行日常維護或重新整理外觀和體驗時，可以很快找到需要更改的地方，建立更新並將其應用到整個介面。無需重新編碼和部署大量單獨的 HTML 檔案。

優化速度

與 JavaScript 和其他編碼語言相比，CSS 被認為是輕量級的，因此它是為產品新增生動、引人入勝的內容和體驗的絕佳工具，而不會增加重量，降低載入速度。

此外，它還傾向於積極快取。這些因素加在一起，意味著使用 CSS 製作的動畫應能在首次點選後以及網站或應用的後續載入中快速顯示。

作為谷歌搜尋結果的一個重要排名因素，速度是所有擁有線上業務的企業都應該考慮的問題。

深入學習 CSS 動畫之前的注意事項

現在進入減速區。在你一頭扎進 CSS 動畫之前，我們需要確保你瞭解並準備好應對一些小問題。

相容性問題

有沒有注意到，當你在手機上與網站互動時，一些功能似乎會消失或礙事，或者讓你的電腦速度變慢？

不同的裝置（手機、智慧手錶、平板電腦、電腦等）和瀏覽器（Chrome、Safari、Firefox 等）都採用不同的技術。這些技術意味著它們與程式碼語言的互動方式會有所不同，CSS 動畫也是如此。

如果不進行自定義調整，那麼在使用膝上型電腦的 Firefox 上看起來酷炫無比的動畫效果，在使用手機 Safari 瀏覽器的人看來可能會很奇怪。

質量保證 (QA) 測試對於確保 CSS 動畫在使用者與您的數字網站進行互動的所有地方都能相容至關重要。

解決方案： 在建立 CSS 時，使用 CSS 驗證器和瀏覽器開發工具來幫助識別相容性問題和錯誤。對程式碼特別精通的人可以安裝 Bourbon 等 Sass 混合庫，以保持瀏覽器字首（webkit用於 Chrome 和 Safari，moz用於 Firefox 等）的更新和相容。

試試 17 種動態 CSS 動畫

準備好使用 CSS 動畫打造吸引並留住使用者的精彩數字體驗了嗎？準備好提高至關重要的網站速度，減少維護和重新設計的時間了嗎？

那你就來對地方了！我們整理了一些超棒的 CSS 動畫供你欣賞。點選任何你喜歡的選項，獲取所需的程式碼，然後將其新增到你的網站樣式表中。(順便提一句，CodePen 上的公共筆根據其許可細則，任何人都可以出於任何目的自由使用）。

載入動畫

載入動畫可能不是 CSS 動畫中最令人興奮的一類，但它們對使用者體驗至關重要。如果你能提供一個指示器，告訴訪問者即將出現精彩的內容，那麼應用程式和網站的訪問者就更有可能耐心等待載入時間。

CSS Loader with dots，作者：Aliaksei Peterson

現在，“稍等片刻！”的意思已經被人們普遍接受。就像程式碼一樣，這個選項簡潔明瞭，非常適合語氣嚴肅或風格簡約的線上網站。

Simple HTML & SVG Loading Spinners，作者：Stephen Delaney

另一個經典的載入符號–旋轉器。該動畫可選擇整合 SVG（Scalable Vector Graphic 的縮寫，即可縮放向量圖形），它可以縮放而不會降低質量。

Loading Animation，作者：Mohamed Yousef

這組旋轉的水滴狀圖形提供了一個精美簡潔的動畫，讓人沉醉其中，從而減少了額外載入時間的煩惱。夫復何求？

Only Css Animation #02，作者：Hisami Kurita 

這是一個令人印象深刻的純 CSS 動畫，讓人聯想到進入高檔餐廳或酒店的網站。更改顏色和名稱以匹配您自己的品牌。

The Glowing Loader – Pure CSS Animation，作者：Maxime Rossignol

這是我們見過的最有創意的載入螢幕，這個動畫讓觀眾在等待其他數字元素開始執行時有很多東西可看。

內容動畫

想確保您的應用程式和網站使用者不會錯過關鍵資訊？使用這些 CSS 動畫來突出顯示吧。

Changing Text Animation CSS，作者：Coding Yaar

使用此動畫為標題和其他重要文字新增一點亮點，並提供滑入移動、顏色變化等細節。

CSS Block Revealing Effect，作者：Abubaker Saeed

該動畫的效果提供了另一種有趣的方式，可將視線吸引到重要的內容元素上，確保訪客不會錯過。

CSS Reveal Slider，作者：Adam Kuhn

它採用了大量有趣的字型、動畫按鈕和可揭示更多資訊的翻轉功能–這似乎是向使用者介紹常見問題解答、功能等較長的不可錯過內容的一個不錯選擇。

Animated Info Card，作者：亞當-庫恩

該選項來自上一個 CSS 動畫的創作者，它以另一種大膽而富有創意的方式引導使用者瞭解您的品牌故事元素。

按鈕動畫

按鈕通常是讓使用者採取行動或深入瞭解內容的入口。為重要按鈕新增 CSS 動畫，激發互動。

CSS Button On Hover Slide Effect，作者：RazorX

這裡有大量選項，可為普通按鈕新增炫酷的填色動畫。

Button Animations，作者：Alex Belmonte

想給按鈕加點動感？使用此 CSS 為按鈕新增懸停效果以及彈跳、搖擺等動作。

CSS button hover effect，作者 Julia

極簡但極具衝擊力的色彩為您的按鈕增添一些驚喜和愉悅。

背景動畫

您希望網站或應用程式中某些元素的背景足夠有趣，能夠吸引人的眼球，同時又不影響使用者的閱讀和操作。

Animated Background Gradient，作者：Mario Klingemann

在網站或應用程式關鍵部分的背景上應用這種無限迴圈的顏色，以增加動感。

CSS Animations with SVGs，作者：Joyanna

柔和、多彩的形狀配合細膩的動作，可為您最重要的內容部分提供與眾不同的背景。

Simple parallax scroll，作者：Ungmo Lee

視差滾動動畫可使前景和背景同時移動，但移動速度不同，從而產生深度錯覺。從示例中可以看出，如果不加節制地應用，視差效果可能會讓人難以接受。

任意動畫

試試這些簡單有趣的 CSS 動畫，為使用者體驗的各個環節增添一點樂趣。

Template: Logo，作者：亞歷克斯-卡茨

將滑鼠懸停在徽標上，可以看到輕微的膨脹效果。這種微妙的運動可用於徽標、按鈕、圖示和其他元件。

Floating Animation – CSS，作者：Mario Duarte

像這樣輕柔的浮動效果是另一種令人驚喜和有趣的觸感，它能讓觀眾知道你關心你的數字資產以及他們的體驗。

如何為網站新增 CSS

上述每個 CSS 動畫都附有 HTML、CSS，有時還有其他程式碼，你可以直接貼上到網站樣式表中，然後根據需要進行編輯，使之成為你自己的動畫。

如果你的網站是定製的，由你來管理程式碼，而你還不熟悉 CSS，我們認為，在嘗試實現上述動畫之前，瞭解一下 CSS 語言會對你有所幫助。瞭解建立一行程式碼的基礎知識，然後通過 CSS 學習指南深入學習開發 CSS 技能的最佳教程。

從上述示例中，你會發現建立一個動畫需要大量程式碼。如果你對 CSS 已經駕輕就熟，並準備優化空間和時間，可以考慮使用 CSS 動畫庫。每個庫都會說明如何將其新增到你的網站，通常涉及在標記中新增原始檔或 CDN。安裝完成後，你就可以使用庫中特定的動畫速記來新增動畫。

如果你使用的是 WordPress 網站，那麼該平臺本身就提供了使用網站編輯器（某些主題的測試版功能）或自定義器（大多數經典主題和某些第三方主題都提供了自定義器）編輯 CSS 的便捷指南。在這些編輯介面中，你可以貼上上述 CSS 動畫示例中的程式碼。