17370845950

Animate.css 是一个轻量级 CSS 动画库，通过引入 CDN 或 npm 安装后，使用 animate__animated 与预设类如 fade-in、slide-in-left 实现元素动画，支持 JavaScript 控制触发时机与重复次数，并可通过自定义 CSS 变量调整动画时长，适用于快速提升页面交互效果。

Animate.css 是一个轻量级的 CSS 动画库，能让你快速为元素添加平滑的渐变动画效果，无需编写复杂的 keyframes 或 transition 规则。通过简单的类名调用，就能实现如淡入、滑动、缩放等常见动效。

引入 Animate.css 库

在使用之前，需要先将 Animate.css 引入项目中。最简单的方式是通过 CDN：

也可以通过 npm 安装：

npm install animate.css

然后在入口文件（如 main.js 或 styles.scss）中导入：

@import 'animate.css';

常用渐变类与使用方式

Animate.css 提供了多种预设的进入和退出动画，适合用于提示、弹窗、内容加载等场景。

• fade-in：元素淡入显示
• fade-out：元素淡出隐藏
• slide-in-left / slide-in-right：从左右侧滑入
• zoom-in：放大式出现

使用方法非常简单，只需在目标元素上添加 animate__animated 和对应的动画类名即可：

  我会淡入出现

注意：所有 Animate.css 类都需要加上 animate__ 前缀，避免命名冲突。

控制动画行为

你可以通过 JavaScript 动态添加或移除类来控制动画触发时机：

const element = document.querySelector('#myElement');
element.classList.add('animate__animated', 'animate__fadeIn');

如果想让动画只播放一次后保持最终状态，可以监听 animationend 事件：

element.addEventListener('animationend', () => {
  element.classList.remove('animate__animated', 'animate__fadeIn');
});

还可以配合 CSS 自定义动画速度：

.slow-fade {
  --animate-duration: 2s;
}

实用小技巧

• 多个动画可叠加使用，例如同时滑入并淡入：
  animate__slideInLeft animate__fadeIn
• 使用 animate__repeat-2 可让动画重复两次
• 隐藏元素时建议结合 visibility 或 display 控制，避免占位问题

基本上就这些。Animate.css 让前端动效变得极其简单，特别适合快速开发阶段提升交互质感，不复杂但容易忽略细节，比如前缀和事件清理。合理使用能让页面更生动。