Animate css 在 CDN 和下载文件中都不起作用答案

【问题标题】：Animate css is not working in both CDN and downloded fileAnimate css 在 CDN 和下载文件中都不起作用
【发布时间】：2023-03-08 09:09:01
【问题描述】：

我尝试使用 Animate.css (https://animate.style/) 为 html 文件中的某些文本设置动画，但该文本未设置动画。

我使用了两种方法，但似乎都不起作用：

来自 CDN

和

我从https://raw.githubusercontent.com/daneden/animate.css/master/animate.css直接从github下载

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <title>Animate.css</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>
    <h1 class="animated infinite jello">Animate Me</h1>
</body>
</html>

我可以知道我的代码的哪一部分出错了。感谢您的善意建议。

【问题讨论】：

标签： html css animation

【解决方案1】：

动画名称和类之间缺少下划线。看看这个例子：

<h1 class="animate__animated animate__bounce">An animated element</h1>

安装 Animate.css 后，将类 animate__animated 以及任何动画名称添加到元素（不要忘记 animate__ 前缀！）：

【讨论】：

谢谢你，纳吉米！我试图让它无限，但它似乎不起作用
动画元素
所有动画都是这样吗？你试过其他的吗？请注意，它是双下划线。
成功了。但我添加了“无限”以使其成为循环，文本仅动画一次。
一个动画元素

动画元素

一个动画元素