爲什麼我的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">LIAM DOCHERTY</h1> 

應該是：

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

Answer 3

這應該工作：

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