用JavaScript觸發CSS動畫？

Question

我這裏使用的CSS的：

@keyframes themesappear{ 
    0% { 
     opacity: 0; 
    } 100% { 
     opacity: 1; 
    } 
} 
@-webkit-keyframes themesappear{ 
    0% { 
     opacity: 0; 
    } 100% { 
     opacity: 1; 
    } 
} 

和JavaScript這裏：

var theme = function() { 
    document.getElementById('themes').style.animation = "themesMappear 2s forwards;"; 
    document.getElementById('themes').style.WebkitAnimation = "themesappear 2s forwards;"; 
}; 

在企圖使id爲 「主題」 淡入和出現在div ...

問題是onclick不起作用，並且透明度也沒有改變，我該如何解決這個問題？你可以看到網站here

我如何使用onlclick：<h1 id = "WM" onclick = "theme()">Change Theme</h1>

Answer 1

幾件事情

1. 你似乎有一個錯字（的themesMappear代替themesappear）
2. 你在分號規則的結尾，這使得它無效，因此不被添加。它應該是"themesMappear 2s forwards"，不"themesMappear 2s forwards;"
3. 你應該創建一個類的規則，然後通過剛剛JS
切換與風格類