使用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用这些样式切换类