如何过早停止动画执行答案

【问题标题】：how to stop animation from wexecuting too early如何过早停止动画执行
【发布时间】：2021-03-09 16:26:25
【问题描述】：

我正在尝试使用 animate.css 的 fadeInUp 函数，但它一直过早地工作。起初我认为它不起作用，然后我刷新了页面并动画但只有当我点击刷新按钮时。这是代码

 <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>

我还尝试降低动画的速度，它显示我做了，只是当我点击刷新按钮并且页面正在加载时它仍然有效。所以我想知道的是如何让动画在加载后而不是在加载期间工作。

【问题讨论】：

你应该阅读那个图书馆的文件

标签： html css animation css-selectors css-animations

【解决方案1】：

覆盖动画延迟属性，如：

动画延迟：6s；（这里的 6s 表示动画将在 6 秒后开始）

使用animation-duration来改变动画liuke的速度：

动画持续时间：10s；（这里 10s 表示动画将在 10 秒内完成）谢谢。

【讨论】：