用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
切换与风格类