animate.css 不工作 - CSS

当你引入了 animate.css 动画库，但是无法正常工作时，有几个可能的原因和解决方法：

1. 引入错误

首先确保你正确地引入了 animate.css 文件。可以通过链接地址或者本地文件方式引入。如果你从本地引入，请确保文件路径正确。

<!-- 引入在线 animate.css 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css">

<!-- 引入本地 animate.css 文件 -->
<link rel="stylesheet" href="/path/to/animate.min.css">

<!-- 例子 -->
<div class="animate__animated animate__bounce">Hello World!</div>

2. class 名称错误

确保你在 HTML 元素的 class 中正确地使用了动画名称。动画名称应该使用 animate__ 前缀，并且后面接上动画效果的名称（比如 bounce）。

<!-- 错误 -->
<div class="animated bounce">Hello World!</div>

<!-- 正确 -->
<div class="animate__animated animate__bounce">Hello World!</div>

3. 浏览器不支持 animation 或者动画名称

某些旧版本或者不常用的浏览器可能不支持 animation 或者某些动画名称，导致动画无法正常工作。可以在 animate.css 官网 中查看浏览器支持情况。

4. 动画事件错误

如果你使用的是 JavaScript 来触发动画效果，确保你使用了正确的动画事件名称。默认情况下，动画事件名称应该是 animationend。

const element = document.querySelector('.animate__animated');
element.addEventListener('animationend', () => {
  console.log('Animation ended');
});

如果你添加 .animate__delay 类名来给动画一个延迟时间，请使用 animationend 事件的代替者 animationiteration 捕获动画重复的时机。

const element = document.querySelector('.animate__animated');
element.addEventListener('animationiteration', () => {
  console.log('Animation repeated');
});

通过以上这些解决方法，你应该能够解决 animate.css 无法工作的问题，使得你的网页动起来。