Is there a way to stop all CSS animations in a document from the beginning? My idea is to assign a class to elements containing CSS animations at the start, such as '.paused'. Then, using jQuery in my JavaScript, I would remove the '.paused' class with a callback function and add a new class to resume playing, like '.running'.
This is what I currently have:
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;
}
I am facing an issue where the "#slider li.paused" selector is not working. Chrome's inspector states that 'animation-play-state: paused;' is an invalid property value... why is that happening when I already have a similar CSS rule that 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;
}
To sum it up, how can I target all animations with a specific class to ensure they are all paused? The W3 docs state that 'animation-play-state: paused;' should work for all elements, pseudo-elements included, but it's not working in my case. What could be causing this issue?
Your assistance on this matter would be highly appreciated.
Thanks in advance!