How to Pause ALL CSS animations?


Tags: jquery,css,animation,css-animations

Problem :

How would I go about pausing all css animations in a document at start? I want to have a class on all the elements that contain css animations at start, ie: '.paused'. Then, using a call back in my js using jQuery, remove the class '.paused', then add a class to resume playing, ie: '.running'.

Here is what I've got:

HTML:

<li class="firstanimation paused">...</li>
<li class="secondanimation paused">...</li>
<li class="thirdanimation paused">...</li>

CSS:

#slider li.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
#slider li.firstanimation {
    animation: cycle 25s linear infinite;-moz-animation:cycle 25s linear infinite;-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
    animation: cycletwo 25s linear infinite;-moz-animation:cycletwo 25s linear infinite;-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
    animation: cyclethree 25s linear infinite;-moz-animation:cyclethree 25s linear infinite;-webkit-animation:cyclethree 25s linear infinite;
}

So, my problem is that the "#slider li.paused" selector doesn't work. In Chrome, the inspector says the 'animation-play-state:paused;' is an invalid property value...? I dont get that because I also have this in my css and it works fine:

#slider:hover li, #slider:hover .progress-bar {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

So again, basically in a nutshell, how do I target all my animations with a class to have them all be paused? According to W3 docs, animation-play-state: paused; "Applies To: all elements, ::before and ::after pseudo-elements." But it doesnt in my case. What do I have wrong?

Your help is greatly appreciated.

Thnx!



Solution :

Your problem is due to selector specificity. Since the both the .paused and li.elemclass have the same specificity, the compiler will always choose the last one

To fix it you can move the .paused properties after the others or make it have more precedence by adding another layer, something like body #slider li.paused

Check the docs for more info on specificity and here's a specificity calculator for your convenience


    CSS Howto..

    Website elements go haywire when the user zooms in or out. How do I keep them from moving?

    How do you programmatically apply a css class to an asp.net control?

    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]

    How to correct CSS formatting problem in Visual Studio

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to add modal window parameters for this code?

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    How do you apply a fading overlay to an image in CSS?

    How to create button backgrounds with css

    How to create one UL menu similar to another

    How to inspect precompiled minified SASS code

    Can't show updated image

    How to set Highcharts data series in x-axis using crosshairs?

    How to vertically center text next to a radio button

    showing a css component for a specified number of seconds

    Show first image and display none other image

    how do I give a div a responsive height

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    How to make a toggleable navbar in pure CSS?

    how would I have the image in this div with rollover not get the overlay?

    How do I set multiple elements' css in one page without the :not attribute?

    How to set css class to div area of ckeditor

    how to set div display property block when url have some id?

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    how to increase/decrease font-size from external css [closed]

    How to restrict ol, ul css to a div?

    How to insert the number into the bottom right of each page by TWIG and CSS

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How to generate a source map for minified CSS generated by dotless

    How to add CSS class to the HTML5 picture element