Trigger CSS animation with JavaScript?

Question

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>

Can you show how you are using the onclick?

putvande
– putvande

2015-06-04 21:02:04 +00:00
Commented Jun 4, 2015 at 21:02 — putvande
– putvande, Commented Jun 4, 2015 at 21:02

Patrick · Accepted Answer · 2015-06-04 21:06:37Z

5

few things

you seem to have a typo (themesMappear instead of themesappear)
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;"
you should really create a class with those rules, and then just toggle the class with those styles via JS

answered Jun 4, 2015 at 21:06

Patrick

14k5 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JakAttk123 Over a year ago

Thanks! Any idea why the onclick isn't triggering?

Collectives™ on Stack Overflow

Trigger CSS animation with JavaScript?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related