使用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不起作用，不透明度也没有改变，我该如何解决？ 你可以在这里看到网站

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

Answer 1

一些事情

1. 您似乎有错字（ themesMappear而不是themesappear ）
2. 您在规则的末尾有一个分号，这使其无效，因此不添加。 应该是"themesMappear 2s forwards" ，而不是"themesMappear 2s forwards;"
3. 您应该使用这些规则真正创建一个类，然后通过JS切换具有这些样式的类