为什么我的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时，您应该会看到反弹动画。

Answer 2

这应该有效：

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

Answer 3

等号是错误的一面：

<h1 =class"bounceIn">LIAM DOCHERTY</h1>

应该是：

<h1 class="bounceIn">LIAM DOCHERTY</h1>