animate.css详解：轻松实现网页动画效果

最新推荐文章于 2025-10-25 01:53:49 发布

原创

最新推荐文章于 2025-10-25 01:53:49 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

前言

在网页设计中，动画效果不仅仅是视觉上的装饰，更是提升用户体验的重要元素。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>