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>

实现效果

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>

实现效果

animate.css 动画没有效果

原因： 电脑设置中关闭了动画效果。

某些操作系统有全局的动画效果开关，如果将其关闭，可能会影响网页动画的显示。可通过 『控制面板 ---- 轻松使用 ---- 轻松使用设置中心 ---- 使计算机更易于查看』，查看是否勾选了 『关闭所有不必要的动画』。

1. 以 win11 为例，打开控制面板，找到『轻松使用设置中心』；

2. 找到『使计算机更易于查看』；

3. 将『关闭所有不必要的动画』取消勾选并应用保存即可。

设置后效果