CSS工具Animate.css如何使用_动画效果快速实现技巧

Animate.css 是一个通过添加类名实现动画效果的 CSS 库，支持 CDN 或 npm 引入，使用时需添加 animate__animated 及具体动画类名（如 animate__fadeIn），并可通过 animate__infinite、animate__delay-2s 等控制动画行为，结合 JavaScript 动态触发，适用于网页中快速实现进入、退出、强调等动画效果。

Animate.css 是一个开源的 CSS 动画库，无需编写复杂的动画代码，只需为元素添加对应的类名，就能快速实现丰富的进入、退出、强调等动画效果。它兼容现代浏览器，使用简单，非常适合在网页开发中快速提升视觉体验。

引入 Animate.css 文件

要使用 Animate.css，首先要将它引入项目中。可以通过 CDN 或本地安装方式引入。

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

npm install animate.css --save

立即学习“前端免费学习笔记（深入）”；

安装后在 JS 文件或主样式文件中导入：

@import 'animate.css';

基本使用方法

使用 Animate.css 只需为 HTML 元素添加两个类：animate__animated 和具体的动画类名，例如 animate__fadeIn。

示例：让一个 div 淡入显示

<div class="animate__animated animate__fadeIn">Hello, 我会淡入！</div>

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

18

查看详情

注意：Animate.css 4.0 版本以后类名前缀为 animate__，避免与其他样式冲突。

常用动画类型与类名

Animate.css 提供多种动画分类，方便按需选择：

• 进入动画（元素出现时）：animate__bounceIn、animate__fadeIn、animate__zoomIn、animate__slideInLeft
• 退出动画（元素隐藏时）：animate__fadeOut、animate__bounceOut、animate__zoomOut
• 强调效果（悬停反馈）：animate__pulse、animate__rubberBand、animate__shakeX
• 其他特效：animate__flash、animate__headShake、animate__swing

控制动画行为

可以通过额外类名或内联样式调整动画执行方式：

• 重复动画：添加 animate__repeat-2（重复2次）或 animate__infinite（无限循环）
• 设置延迟：使用 animate__delay-2s 延迟2秒开始
• 调整速度：animate__slow、animate__faster 等类可改变动画快慢

示例：无限跳动的图标

<i class="animate__animated animate__bounce animate__infinite"></i>

结合 JavaScript 动态触发

常配合 JS 在滚动到元素、点击按钮等场景下动态添加动画类：

JavaScript 示例：

const element = document.getElementById('myElement');
element.classList.add('animate__animated', 'animate__fadeInUp');

可以监听事件后添加类，动画完成后移除类以重播：

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

基本上就这些。掌握引入方式、类名结构和常用控制技巧，就能高效利用 Animate.css 快速实现专业级动画效果，无需从零写 keyframes。关键是熟悉常用类名并合理搭配使用场景。不复杂但容易忽略细节，比如前缀和版本差异。

以上就是CSS工具Animate.css如何使用_动画效果快速实现技巧的详细内容，更多请关注php中文网其它相关文章！