html - 为什么我的 CSS 动画不工作？

Question

我正在使用 this网站通过具有“弹跳”效果来帮助我为我的文本制作动画。我查看了这些步骤，但无法弄清楚为什么这个 CSS 动画不起作用。

这是我的 JSFIDDLE正如您在上面链接的 JSFIDDLE 中看到的那样，我已将类命名为 bounceIn，如步骤中所述，并在代码中链接了动画扩展。然而，什么也没有发生。

<h1 =class"bounceIn">LIAM DOCHERTY</h1>
<h3 =class"bounceIn">WEB DEVELOPER & GRAPHIC DESIGNER</h3>

Answer 1

在您的 CSS 中指定实际的动画。此外，您需要给它一个持续时间。添加此规则:

.bounceIn {
    animation: bounceIn 1s; /* Change to whatever desired duration */
}

另外，在你的 HTML 中修正你的类名

<h1 class="bounceIn">LIAM DOCHERTY</h1>
<h3 class="bounceIn">WEB DEVELOPER & GRAPHIC DESIGNER</h3>

在这些修复后运行 JSFIDDLE 时，您应该会看到弹跳动画正常工作。