animate.css

1. 引入 animate.css 文件
   首先需要在 HTML 文件的 部分引入 animate.css 文件。可以通过 CDN 链接引入，例如：。也可以下载官方文件后本地引入。确保链接正确且网络可达，否则动画类名不会生效。
2. 在元素上添加基础类名
   要触发动画，需在目标 HTML 元素上添加两个类名：'animate__animated' 和具体的动画名称类名（如 'animate__fadeIn'、'animate__slideInLeft' 等）。例如：
   内容
   。animate__animated 是必需的基础类，用于启用动画机制。
3. 使用延迟和重复控制动画
   可通过添加额外类名来调整动画行为。例如，'animate__delay-2s' 表示延迟 2 秒开始动画；'animate__repeat-2' 表示重复 2 次；'animate__infinite' 表示无限循环。这些类名需与基础动画类一起使用，如：
   。
4. 通过 JavaScript 动态控制动画
   若需在特定事件（如滚动、点击）后触发动画，可使用 JavaScript 动态添加类名。例如：element.classList.add('animate__animated', animate__fadeIn'); 完成动画后，可通过监听 'animationend' 事件移除类名以避免重复触发，或设置一次性动画后自动清除。此方法适用于需要交互反馈的场景。

软件页面：Animate。