CSS工具库Animate.css应用_快速集成现成的CSS动画效果-css教程-PHP中文网

应通过CDN引入Animate.css：在head中添加link标签引用https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0，元素需同时添加animate__animated和animate__动画名（如animate__bounce）两个类，且须配合animation-fill-mode: forwards保持结束状态。

css工具库animate.css应用_快速集成现成的css动画效果

怎么在HTML里正确引入Animate.css

直接通过 CDN 引入最稳妥，别下载后本地引用——除非你有离线部署或定制构建需求。官方推荐的 CDN 地址是 @#@#@#@#@#@#@#@#@#@0，注意版本号别写错，v4 和 v3 的类名不兼容。

用标签放在里，顺序无关紧要，但别放在自定义 CSS 后面（否则可能被覆盖）
不需要引入 JS 文件，Animate.css 纯 CSS 实现，animate.min.css 就够了
别漏掉 animation-duration 或 animation-fill-mode 这类基础控制，否则动画可能一闪而过或不触发

  <link rel="stylesheet" href="https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0">

class 名怎么加才生效

必须同时包含两个类：animateanimated（基础触发类）+ 具体动画名（如 animatebounce）。少一个都不动，不是只写 animate__bounce 就行。

常见错误：复制示例时漏掉 animate__animated，页面完全没反应
动画名里的双下划线 __ 是 v4 强制要求，v3 是单下划线，混用会失效
类名区分大小写，animatefadeInUp 不能写成 animatefadeinup
不支持 IE10 及更早版本，如果项目还要兼容，得 fallback 到 JS 动画库

比如让一个 div 进入时弹跳：

<div class="animate__animated animate__bounce">Hello</div>

怎么控制动画触发时机（不是一加载就播）

Animate.css 本身不提供 JS 控制逻辑，它只定义 CSS 动画帧。想“滚动到才播放”或“点击才播放”，得自己监听事件并增删 class。

最常用方式：用 IntersectionObserver 监听元素进入视口，然后加 animate__animated 类（初始只留动画名，避免一进页面就播）
别用 setTimeout 模拟延迟，既不准又难维护
如果用 Vue/React，别在组件挂载后直接 el.classList.add()，注意 SSR 渲染时 DOM 还不存在

简单手动触发示例（点击播放）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<button onclick="this.nextElementSibling.classList.add('animate__animated', 'animate__swing')">摇一摇</button>
<div class="animate__swing">我还没动</div>

为什么动画播完就回弹？怎么让它停在结束状态

默认 CSS 动画播完会恢复原始样式，这是浏览器行为，不是 Animate.css 的 bug。要保持最后一帧，必须显式设置 animation-fill-mode: forwards。

Animate.css v4 已在所有动画 keyframes 里写了 to 状态，但没强制加 forwards，所以得自己补
推荐写法：用额外 class 封装，避免每个地方都重复写内联 style
注意：加了 forwards 后，元素会保留最终 transform、opacity 等值，可能影响后续交互（比如点击区域偏移）

安全写法：

<style>
.animate__stay {
  animation-fill-mode: forwards;
}</style><p></p><div class="animate<strong>swing animate</strong>stay">播完就停在这</div>

Animate.css 的坑基本集中在类名拼写、触发条件缺失和动画保持逻辑上，其他都是 CSS 动画本身的限制，跟库关系不大。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！