CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
JakAttk123
JakAttk123

Reputation: 73

Trigger CSS animation with JavaScript?

I used the CSS here:

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

and the Javascript here:

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

in attempt to make the div with the id "themes" fade in and appear...

The problem is the onclick does not work, and neither does the opacity change, how can I fix this? You can see the website here

How I used the onlclick: <h1 id = "WM" onclick = "theme()">Change Theme</h1>

Upvotes: 1

Views: 3402

Answers (1)

Patrick
Patrick

Reputation: 13974

few things

  1. you seem to have a typo (themesMappear instead of themesappear)
  2. you have a semicolon at the end of the rule, which makes it invalid and therefore not added. It should be "themesMappear 2s forwards", not "themesMappear 2s forwards;"
  3. you should really create a class with those rules, and then just toggle the class with those styles via JS

Upvotes: 5

Related Questions