animate.css詳解：輕松實現網頁動畫效果

前言

在網頁設計中，動畫效果不僅僅是視覺上的裝飾，更是提升用戶體驗的重要元素。animate.css 作為一個輕量級的 CSS 動畫庫，提供了豐富的預設動畫效果，本文將探討 animate.css 使用方法以及在實際項目中的應用案例，幫助你更好地掌握這一強大的工具，讓你的頁面更具個性。

animate.css 是什么？

animate.css 是一個用于實現 CSS 動畫效果的庫，它提供了一系列預定義的動畫類，可以輕松地將動畫效果應用到網頁元素上。這個庫的主要優點是簡單易用，開發者只需在 HTML 元素中添加相應的類名，就能實現各種炫酷的動畫效果，而無需編寫復雜的 CSS 代碼。

一、安裝

使用 npm 安裝
```
npm install animate.css --save
```
使用 yarn 安裝
```
yarn add animate.css
```

二、引入

全局引入

import Vue from 'vue';
import 'animate.css';

局部引入
```
import 'animate.css';
```

三、使用

注意： 在使用 animate.css 時，必須將類 animate__animated 添加到元素，以及任何動畫名稱（不要忘記 animate__ 前綴！）。

animate__animated 類在 animate.css 中起著核心的初始化作用。它為元素啟用了動畫相關的基礎樣式與關鍵的 CSS 屬性，為后續具體動畫的呈現奠定基礎。若缺少 animate__animated 類，即便添加了具體動畫類名，如 animate__fadeIn，動畫也無法生效。

而 animate__ 前綴對于具體動畫類名同樣不可或缺。animate.css 通過這樣統一的前綴約定，將自身的動畫類名與項目中可能存在的其他 CSS 類名區分開來，避免命名沖突。同時，這種規范的命名方式也方便開發者識別和管理動畫相關樣式。若去掉 animate__ 前綴，animate.css 將無法識別并應用對應的動畫效果。

3.1 基礎使用

需要添加動畫的元素添加 animate__animated 類以及你想要的具體動畫類。例如，使用 animate__bounce 動畫效果就是： class="animate__animated animate__bounce"。

<template><div class="animation"><el-button type="primary" @click="isShow = true">點擊</el-button><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div><div v-if="isShow" class="animate__animated animate__flash">Animate.css</div><div v-if="isShow" class="animate__animated animate__pulse">Animate.css</div><div v-if="isShow" class="animate__animated animate__rubberBand">Animate.css</div><div v-if="isShow" class="animate__animated animate__shakeX">Animate.css</div><div v-if="isShow" class="animate__animated animate__shakeY">Animate.css</div><div v-if="isShow" class="animate__animated animate__headShake">Animate.css</div><div v-if="isShow" class="animate__animated animate__swing">Animate.css</div><div v-if="isShow" class="animate__animated animate__tada">Animate.css</div><div v-if="isShow" class="animate__animated animate__wobble">Animate.css</div><div v-if="isShow" class="animate__animated animate__jello">Animate.css</div><div v-if="isShow" class="animate__animated animate__heartBeat">Animate.css</div></div></div>
</template><script>
import "animate.css";
export default {data() {return {isShow: false,};},
};
</script><style scoped>
.animation {padding: 16px;
}
.content {display: flex;
}
div {font-weight: bold;color: cornflowerblue;margin: 20px 48px 0 0;font-size: 16px;
}
</style>

實現效果

在這里插入圖片描述

3.2 自定義動畫

–animate-duration

--animate-duration 是 animate.css 中用于自定義動畫持續時間的 CSS 變量。通過設置這個屬性，可以靈活地調整動畫的速度，以適應不同的設計需求。

<template><div><el-button type="primary" @click="isShow = true">點擊</el-button><div class="animation"><div class="content contentOne"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div></div></div>
</template><script>
import "animate.css";
export default {data() {return {isShow: false,};},
};
</script>
<style scoped>
.animation {display: flex;
}
div {font-weight: bold;color: cornflowerblue;margin: 20px 48px 0 0;font-size: 16px;
}
.contentOne .animate__bounce {--animate-duration: 3s; /* 持續時間改為3秒 */
}
</style>

實現效果
在這里插入圖片描述

animate-delay

animate-delay 是 animate.css 中用于設置動畫延遲時間的 CSS 屬性。通過這個屬性，可以控制動畫開始前的等待時間，從而實現更復雜的動畫效果。

行內定義

<div class="animation"><div class="content"><!-- animate__delay-1s 設置延遲時間為1秒 --><div v-if="isShow" class="animate__animated animate__bounce animate__delay-1s">Animate.css</div></div><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div>
</div>

style 中定義

<style scoped>
.animate__bounce {animation-delay: 1s; /* 設置延遲時間為1秒 */
}
</style>

實現效果
在這里插入圖片描述

3.3 動畫迭代次數

animate__repeat- 是 animate.css 庫提供的一個類，用于控制動畫的重復次數，例如 animate__repeat-2 可以讓動畫重復播放 2 次。你可以將這個類名和其他動畫類名一起添加到元素的 class 屬性中。

<div class="animation"><div class="content"><!-- animate__repeat-2 動畫循環2次 --><div v-if="isShow" class="animate__animated animate__bounce animate__repeat-2">Animate.css</div></div><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div>
</div>

實現效果
在這里插入圖片描述

3.4 使用 @keyframes

這段代碼實現了一個簡單的交互界面，包含一個按鈕和一個盒子。初始時盒子是隱藏的，點擊按鈕后盒子顯示，并帶有動畫效果。代碼中結合使用了 animate.css 庫和自定義的 @keyframes 動畫。

<template><div id="app"><button @click="showBox = true">顯示盒子</button><div v-if="showBox" class="custom-box animate__animated"></div></div>
</template><script>
import "animate.css";
export default {data() {return {showBox: false,};},
};
</script><style scoped>
#app {display: flex;flex-direction: column;align-items: center;justify-content: center;
}button {padding: 10px 20px;font-size: 16px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;
}
/* 使用 @keyframes 定義自定義動畫 */
@keyframes customFadeIn {0% {opacity: 0;transform: scale(0.8);}100% {opacity: 1;transform: scale(1);}
}.custom-box {width: 200px;height: 200px;background-color: #28a745;margin-top: 20px;border-radius: 8px;animation: customFadeIn 0.5s;
}
</style>

實現效果

Animate.css

3.5 與 Javascript 結合使用

模板部分

包含標題、任務輸入框與添加按鈕，輸入框支持回車添加。
用 v-for 遍歷任務數組展示任務列表，每個任務后有刪除按鈕。
腳本部分

數據有 newTask（輸入內容）、tasks（任務列表）、nextTaskId（生成唯一 ID）。
addTask 方法：輸入非空時添加任務，清空輸入框，DOM 更新后添加淡入向下動畫，結束后移除動畫類。
removeTask 方法：觸發淡出向上動畫，動畫結束后從數組移除任務。
樣式部分

為容器、輸入框、按鈕、任務項等設置樣式，添加了交互效果，如按鈕懸停時的樣式變化。

<template><div class="cartoon"><h1>任務列表</h1><div class="task-form"><input v-model="newTask" placeholder="輸入任務內容" @keyup.enter="addTask" /><button @click="addTask">添加任務</button></div><div class="task-list"><div v-for="(task, index) in tasks" :key="task.id" :ref="`task-${task.id}`" class="task-item"><span class="task-text">{{ task.text }}</span><button @click="removeTask(index)">刪除</button></div></div></div>
</template><script>
import "animate.css";
export default {data() {return {newTask: "", // 輸入框的內容tasks: [], // 任務列表nextTaskId: 1, // 用于生成唯一 ID};},methods: {// 添加任務addTask() {if (this.newTask.trim() === "") return; // 防止空內容const newTask = {id: this.nextTaskId++,text: this.newTask.trim(),};this.tasks.push(newTask);this.newTask = ""; // 清空輸入框// 觸發添加動畫this.$nextTick(() => {const taskElement = this.$refs[`task-${newTask.id}`][0];taskElement.classList.add("animate__animated", "animate__fadeInDown");taskElement.addEventListener("animationend", () => {taskElement.classList.remove("animate__animated", "animate__fadeInDown");});});},// 刪除任務removeTask(index) {const task = this.tasks[index];// 觸發刪除動畫const taskElement = this.$refs[`task-${task.id}`][0];taskElement.classList.add("animate__animated", "animate__fadeOutUp");taskElement.addEventListener("animationend", () => {this.tasks.splice(index, 1); // 動畫結束后移除任務});},},
};
</script><style scoped>
.cartoon {margin: 20px;padding: 20px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}h1 {text-align: center;
}.task-form {display: flex;gap: 10px;margin: 20px 0;
}.task-form input {flex: 1;padding: 12px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;font-size: 16px;outline: none;background: rgba(255, 255, 255, 0.9);transition: all 0.3s ease;
}
.task-form input:focus {border-color: #42b983;box-shadow: 0 0 8px rgba(66, 185, 131, 0.3);
}
.task-form button {padding: 12px 20px;background: linear-gradient(135deg, #42b983, #3aa876);color: white;border: none;border-radius: 8px;cursor: pointer;font-size: 16px;display: flex;align-items: center;gap: 8px;transition: all 0.3s ease;
}
.task-form button:hover {background: linear-gradient(135deg, #3aa876, #42b983);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
}.task-item {padding: 10px;margin-bottom: 10px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;
}.task-item button {background-color: #ff4d4d;color: white;border: none;padding: 5px 10px;border-radius: 5px;cursor: pointer;
}.task-item button:hover {background-color: #ff1a1a;
}.task-text {margin-right: 16px;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>