如何使用 animate.css答案

【问题标题】：how to use animate.css如何使用 animate.css
【发布时间】：2021-06-06 22:46:41
【问题描述】：

我正在尝试使用 animate.css 函数fadeInUp 为 div 设置动画，但它不起作用。

    <html>
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    </head>
    <body>
    <div class="grid mt-4 claim animate__animated animate__fadeInUp"></div>
    </body>
    </html>

【问题讨论】：

为什么你的div 没有覆盖</div>？您的代码运行良好。试试这个 - <div class="grid mt-4 claim animate__animated animate__fadeInUp">test</div>
@s.kuznetsov 它在我的IDE上，我会立即编辑它
我刚刚在 SO sn-p 中检查了您的代码。而且代码对我来说效果很好。
嗯，我不知道这是为什么，但它对我不起作用
我做了一个sn-p。看一看。文本遵循fadeInUp 原则。

标签： html css animation css-selectors

【解决方案1】：

要延迟动画，你需要使用规则animation-delay。像这样：

div {
  animation-delay: 5s;
}

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

<div class="grid mt-4 claim animate__animated animate__fadeInUp">test</div>

【讨论】：

我重新检查了它并且它工作了，唯一的问题是它只能在我刷新页面时立即工作。我尝试将速度降低到 2 秒，但没有任何改变
您的意思是延迟 2 秒吗？如何将速度设置为 2 秒？
是的，延迟 2 秒。我通过在我的 div 中添加“animate__slow”类名来做到这一点。它是 animate.css 的默认功能。我看到了更改，但它仍然在我刷新页面而不是之后加载
事实上animate__slow 类负责动画的duration，而不是延迟。你需要一个规则为animation-delay的类。
我更新了我的答案以添加animation-delay。不是2秒，而是10秒。动画在 10 秒后开始。这样的结果有必要吗？