Javascript - Change all animation-play-state on page load

Issue

I have a

* {
  animation-play-state: paused;
}

in my global CSS, it controls ALL animations on the page. How can I make it so it changes to "running" once all elements have loaded in? It functions like a loading screen basically, but it runs before the page has finished loading.

Solution

Please don't use the * selector to control animation (or anything, this selector is known to be slow). Instead use a class in the body as helper and remove that class when you no longer need it.

body.noanim *{
        animation-play-state: paused;
}

And then

$(document.body).removeClass('noanim');

{Edit}

You can filter a little more to match your specific set of elements and replace the * selector for that filter.

I've setup a little jsfiddle with a demo that resumes animation after page has finished loading with a 3 secs timeout.

Answered By - devconcept