Animate.css

Animate.css v4 帶來了一些重大變更，請在從 v3.x 及以下版本更新之前參閱遷移指南。

Animate.css 是一個即用型、跨瀏覽器的動畫程式庫，可供您在網路專案中使用。非常適合用於強調、首頁、滑塊和引導注意力的提示。

安裝和使用

安裝

使用 npm 安裝

$ npm install animate.css --save

或使用 Yarn 安裝（這僅適用於 Webpack、Parcel 等適當的工具。如果您沒有使用任何工具來打包或綑綁您的程式碼，您可以簡單地使用以下 CDN 方法）

$ yarn add animate.css

匯入到您的檔案中

import 'animate.css';

或使用 CDN 直接將其新增到您的網頁中

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

基本用法

安裝 Animate.css 之後，將類別 animate__animated 新增到元素，以及任何動畫名稱（別忘了 animate__ 前綴！）

<h1 class="animate__animated animate__bounce">An animated element</h1>

這樣就完成了！您已經獲得一個 CSS 動畫元素。太棒了！

動畫可以改善介面的 UX，但請記住它們也可能會阻礙您的使用者！請閱讀最佳實務和注意事項章節，以最佳方式讓您的網頁事物栩栩如生。

使用 `@keyframes`

儘管此函式庫提供了一些輔助類別，例如 animated 類別，讓您可以快速執行，但您可以直接使用提供的動畫 keyframes。這提供了一個靈活的方式，讓您可以在目前的專案中使用 Animate.css，而無需重構您的 HTML 程式碼。

範例

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

請注意，某些動畫依賴於動畫類別上設定的 animation-timing 屬性。變更或未宣告它可能會導致意外的結果。

CSS 自訂屬性（CSS 變數）

自版本 4 以來，Animate.css 使用自訂屬性（也稱為 CSS 變數）來定義動畫的持續時間、延遲和反覆次數。這使得 Animate.css 非常靈活且可自訂。需要變更動畫持續時間嗎？只需在全域或本機設定一個新值即可。

範例

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

自訂屬性也讓您可以輕鬆地變更所有動畫的時間約束屬性。這表示您可以使用 javascript 一行程式碼產生慢動作或縮時攝影效果

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

儘管有些老舊的瀏覽器不支援自訂屬性，但 Animate.css 提供適當的後備，擴大其對支援 CSS 動畫的任何瀏覽器的支援。

在 GitHub 上編輯

公用程式類別

Animate.css 隨附一些公用程式類別，以簡化其使用。

延遲類別

您可以直接在元素的類別屬性上新增延遲，就像這樣

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Animate.css 提供以下延遲

類別名稱	預設延遲時間
`animate__delay-2s`	`2 秒`
`animate__delay-3s`	`3 秒`
`animate__delay-4s`	`4 秒`
`animate__delay-5s`	`5 秒`

提供的延遲時間為 1 至 5 秒。您可以自訂它們，將 --animate-delay 屬性設定為更長或更短的持續時間

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

慢、更慢、快和更快類別

您可以透過新增這些類別來控制動畫的速度，如下所示

<div class="animate__animated animate__bounce animate__faster">Example</div>

類別名稱	預設速度時間
`animate__slow`	`2 秒`
`animate__slower`	`3 秒`
`animate__fast`	`800 毫秒`
`animate__faster`	`500 毫秒`

animate__animated 類別的預設速度為 1 秒。您也可以透過 --animate-duration 屬性自訂動畫持續時間，整體或局部。這將影響動畫和實用程式類別。範例

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}

請注意，有些動畫的持續時間小於 1 秒。由於我們使用了 CSS calc() 函數，透過 --animation-duration 屬性設定持續時間將會遵守這些比例。因此，當您變更整體持續時間時，所有動畫都會對變更做出反應！

重複類別

您可以透過新增這些類別來控制動畫的重複次數，如下所示

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

類別名稱	預設重複次數
`animate__repeat-1`	`1`
`animate__repeat-2`	`2`
`animate__repeat-3`	`3`
`animate__infinite`	`無限`

與延遲和速度類別一樣，animate__repeat 類別基於 --animate-repeat 屬性，預設重複次數為 1。您可以透過將 --animate-repeat 屬性設定為更長或更短的值來自訂它們

/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}

請注意，animate__infinite 不使用任何自訂屬性，且對 --animate-repeat 的變更不會產生任何影響。別忘了閱讀最佳實務區段，以最佳利用重複動畫。

在 GitHub 上編輯

最佳實務

動畫可以大幅改善介面的使用者體驗，但遵循一些準則非常重要，以免過度使用並降低網頁事物上的使用者體驗。遵循下列規則應能提供良好的開始。

有意義的動畫

您應避免只為了動畫而動畫元素。請記住，動畫應讓意圖明確。吸引注意力的動畫（彈跳、閃爍、脈衝等）應使用在介面中將使用者的注意力帶到特別的事物上，而不僅僅是讓介面「更炫」。

進入和離開動畫應使用在導向介面中正在發生的事物，清楚地表示它正在轉換為新狀態。

這並不表示您應避免在介面中增添趣味性，只要確保動畫不會妨礙您的使用者，且頁面效能不會受到過度使用動畫的影響即可。

不要對大型元素進行動畫處理

避免執行此操作，因為這不會為使用者帶來太多價值，而且可能只會造成混淆。除此之外，動畫很可能會很粗糙，最終導致不良的 UX。

不要對根元素進行動畫處理

對 <html/> 或 <body/> 標籤進行動畫處理是可行的，但您應該避免執行此操作。有些報告指出這可能會觸發一些奇怪的瀏覽器錯誤。此外，讓整個頁面彈跳幾乎不會為您的 UX 提供良好的價值。如果您確實需要這種效果，請將您的頁面包覆在一個元素中並對其進行動畫處理，如下所示

<body>
  <main class="animate__animated animate__fadeInLeft">
    <!-- Your code -->
  </main>
</body>

應避免無限動畫

儘管 Animate.css 提供了用於重複動畫的工具類別，包括無限動畫，但您應該避免使用無盡動畫。這只會分散使用者的注意力，並可能讓他們中的一大部分感到厭煩。因此，請明智地使用它！

注意元素的初始和最終狀態

所有 Animate.css 動畫都包含一個稱為 animation-fill-mode 的 CSS 屬性，它控制動畫前後元素的狀態。您可以在這裡閱讀更多相關資訊。Animate.css 預設為 animation-fill-mode: both，但您可以根據需要進行變更。

不要停用 `prefers-reduced-motion` 媒體查詢

自 3.7.0 版以來，Animate.css 支援 prefers-reduced-motion 媒體查詢，它會根據作業系統偏好在支援的瀏覽器上停用動畫（大多數目前的瀏覽器都支援它）。這是一個重要的無障礙功能，絕不應停用！這是內建在瀏覽器中，以幫助患有前庭和癲癇發作障礙的人。您可以在這裡閱讀更多相關資訊。如果您的網頁需要動畫才能運作，請警告使用者，但不要停用此功能。您只需使用 CSS 即可輕鬆執行此操作。以下是一個簡單的範例

請參閱 Elton Mesquita (@eltonmesquita) 在 CodePen 上的 Prefers-reduce-motion 媒體查詢。

陷阱

您無法對內嵌元素進行動畫處理

儘管某些瀏覽器可以對內嵌元素進行動畫處理，但這違反了 CSS 動畫規格，而且會在某些瀏覽器上中斷或最終停止運作。請務必對區塊或內嵌區塊層級元素進行動畫處理（網格和彈性容器及其子元素也是區塊層級元素）。您可以在對內嵌層級元素進行動畫處理時將元素設定為 display: inline-block。

溢位

大多數 Animate.css 動畫會在螢幕上移動元素，並可能在您的網頁上建立捲軸列。這可以使用 overflow: hidden 屬性來管理。沒有關於何時何地使用它的秘訣，但基本概念是在包含動畫元素的父元素中使用它。由您決定何時以及如何使用它，本指南可以幫助您了解它。

重複之間的間隔

很遺憾，目前無法使用純 CSS 來達成此目的。您必須使用 Javascript 才能達成此結果。

在 GitHub 上編輯

與 Javascript 搭配使用

當您將 animate.css 與 Javascript 結合使用時，您可以執行許多其他操作。一個簡單的範例

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

您可以偵測動畫何時結束

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

或變更其持續時間

const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');

您也可以使用一個簡單函式來新增動畫類別並自動移除它們

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

並像這樣使用它

animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

如果您很難理解前一個函式，請查看 const、classList、箭頭函式和 Promises。

在 GitHub 上編輯

從 v3.x 及更早版本進行移轉

Animate.css v4 帶來了一些改進、優化的動畫和新的動畫，這使得升級變得有價值。然而，它也帶來了重大變更：我們已為所有 Animate.css 類別新增一個前綴 - 預設為 animate__ - 因此無法直接移轉。

但別擔心！儘管預設建置 animate.min.css 帶有 animate__ 前綴，但我們也提供 animate.compat.css 檔案，它完全沒有前綴，就像以前的版本（v3.x 及更早版本）。

如果您正在使用打包器，請更新您的匯入

從

import 'animate.min.css';

到

import 'animate.compat.css';

請注意，根據您專案的設定，這可能會有些許變更。

如果使用 CDN，請更新 HTML 中的連結

從

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
</head>

到

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>

對於新專案，強烈建議使用預設帶有前綴的版本，因為它將確保您幾乎不會遇到與專案衝突的類別。此外，在後續版本中，我們可能會決定停用 animate.compat.css 檔案。

在 GitHub 上編輯

自訂建置

無法從 node_modules 資料夾進行自訂建置，因為我們沒有在 npm 模組中提供建置工具。

Animate.css 由 npm、postcss + postcss-preset-env 提供支援，這表示您可以使用適當的備援功能輕鬆建立自訂建置，並使用未來的 CSS。

首先，您需要 Node 和所有其他相依性

$ git clone https://github.com/animate-css/animate.css.git
$ cd animate.css
$ npm install

接下來，執行 npm start 來編譯您的自訂建置。將會產生三個檔案

animate.css：原始建置，易於閱讀且未進行任何最佳化
animate.min.css：已壓縮，可立即用於製作
animate.compat.css：已壓縮，可立即用於製作，不含類別前綴。這應僅用於遷移的簡易路徑。

例如，如果您只會使用部分「注意吸引者」動畫，請編輯 ./source/animate.css 檔案，刪除所有 @import 以及您要使用的部分。

@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';

現在，只要執行 npm start，您的高度最佳化建置就會產生於專案的根目錄。

變更預設前綴

在自訂建置中變更 animate 的前綴非常簡單。變更 package.json 檔案中 animateConfig 的 prefix 屬性，並使用 npm start 重新建置函式庫

/* on Animate.css package.json */
"animateConfig": {
  "prefix": "myCustomPrefix__"
},

然後

$ npm start

輕鬆簡單！

在 GitHub 上編輯

無障礙性

Animate.css 支援 prefers-reduced-motion 媒體查詢，讓對動作敏感的使用者可以選擇不使用動畫。在支援的平台上（目前包括所有主要瀏覽器和作業系統，包含行動裝置），使用者可以在作業系統偏好設定中選擇「減少動作」，這會為他們關閉 CSS 轉場，而無需任何其他工作。

在 GitHub 上編輯

核心團隊


Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css 建立者	維護者	核心貢獻者

在 GitHub 上編輯

授權和貢獻

Animate.css 授權於希波克拉底授權。

貢獻

提交拉取請求是此處的途徑。我們只有兩項提交拉取請求的規則：符合命名慣例（駝峰式大小寫，分類 [淡入、彈跳等]）並讓我們在 pen 中看到已提交動畫的示範。最後一項很重要。

行為準則

此專案和所有參與者都受貢獻者盟約行為準則約束。參與者應遵守此準則。請將不可接受的行為報告給 animate@eltonmesquita.com。

在 GitHub 上編輯

只要加入水就能用的 CSS 動畫

吸引注意力的

背面入口

背面出口

彈跳入口

彈跳出口

淡入入口

淡出出口

翻轉

光速

旋轉入口

旋轉出口

特殊

縮放入口

縮放出口

滑動入口

滑動出口

安裝和使用

安裝

基本用法

使用 @keyframes

CSS 自訂屬性（CSS 變數）

公用程式類別

延遲類別

慢、更慢、快和更快類別

重複類別

最佳實務

有意義的動畫

不要對大型元素進行動畫處理

不要對根元素進行動畫處理

應避免無限動畫

注意元素的初始和最終狀態

不要停用 prefers-reduced-motion 媒體查詢

陷阱

您無法對內嵌元素進行動畫處理

溢位

重複之間的間隔

與 Javascript 搭配使用

從 v3.x 及更早版本進行移轉

自訂建置

變更預設前綴

無障礙性

核心團隊

授權和貢獻

貢獻

行為準則

使用 `@keyframes`

不要停用 `prefers-reduced-motion` 媒體查詢