CSS工具Animate.css如何实现元素动画_使用Animate.css类控制过渡和动画效果-css教程-PHP中文网

CSS工具Animate.css如何实现元素动画_使用Animate.css类控制过渡和动画效果

P粉602998670

发布： 2025-11-28 18:35:55

原创

946人浏览过

Animate.css 是一个简化网页动画的 CSS 库，通过引入 CDN 或 npm 安装后，为元素添加 animate__animated 与对应类名（如 animate__bounce）即可实现弹跳、淡入、旋转等效果；支持通过 animate__infinite、animate__delay-2s 等类控制播放次数、延迟和速度；结合 JavaScript 可动态添加类实现交互触发，需注意重复播放时先移除类并强制重排以重置动画。

css工具animate.css如何实现元素动画_使用animate.css类控制过渡和动画效果

Animate.css 是一个流行的 CSS 动画库，它让开发者无需编写复杂的 CSS 动画代码，就能为网页元素添加流畅的动画效果。只需引入库文件，并为元素添加对应的类名，即可快速实现进入、退出、弹跳、旋转等动画。

引入 Animate.css 库

使用 Animate.css 前，需要先将其引入项目。可以通过 CDN 或 npm 安装方式引入。

常用 CDN 引入方式：

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

登录后复制

或通过 npm 安装：

npm install animate.css --save

登录后复制

安装后在项目样式文件中导入：

@import 'animate.css';

登录后复制

基本动画类的使用方法

Animate.css 提供了大量预定义的动画类，主要分为以下几类：进入动画（attention seekers）、淡入淡出（fading）、滑动（sliding）、旋转（rotating）、缩放（zooming）和退出动画（exiting）等。

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

要让元素动起来，只需给元素添加 animate__animated 和具体动画类名，例如：

Melodio

Melodio是全球首款个性化AI流媒体音乐平台，能够根据用户场景或心情生成定制化音乐。

110

查看详情

<div class="animate__animated animate__bounce">弹跳效果</div>

登录后复制

animate__animated：基础类，激活动画行为
animate__bounce：实现弹跳动画
其他常见动画类如：animate__fadeIn、animate__rotateIn、animate__zoomOut

控制动画执行与重复

Animate.css 支持通过附加类来控制动画的播放次数、延迟和速度。

重复次数：使用 animate__repeat-2 让动画播放两次，也可用 animate__infinite 实现无限循环
延迟动画：添加 animate__delay-2s 可延迟 2 秒开始
调整速度：使用 animate__slow、animate__faster 控制快慢

示例：无限弹跳且每次慢速播放

<div class="animate__animated animate__bounce animate__infinite animate__slow">持续慢速弹跳</div>

登录后复制

结合 JavaScript 触发动画

静态添加类只能实现页面加载时的动画。若需用户交互触发（如点击按钮），可通过 JavaScript 动态添加和移除类。

注意：重复触发动画前需先移除类，否则不会重新播放。

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

// 想再次触发动画时，需短暂延迟清除类
function reAnimate() {
  element.classList.remove('animate__fadeIn');
  void element.offsetWidth; // 强制重排
  element.classList.add('animate__fadeIn');
}

登录后复制

基本上就这些。Animate.css 简化了前端动画实现流程，适合快速原型开发或增强用户体验。只要掌握类名结构和触发机制，就能灵活运用各种视觉效果。不复杂但容易忽略细节，比如类名前缀和重播逻辑。

以上就是CSS工具Animate.css如何实现元素动画_使用Animate.css类控制过渡和动画效果的详细内容，更多请关注php中文网其它相关文章！