Pausing CSS Slide with -webkit-animation-play-state:paused; not working <p>I have the following code:</p> <pre><code> .picTransition .item { position: absolute; left: 0; right: 0; opacity: 0; -webkit-animation: picTransition 56s linear infinite; -moz-animation: picTransition 56s linear infinite; -ms-animation: picTransition 56s linear infinite; animation: picTransition 56s linear infinite; } .picTransition.paused{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; } .picTransition .item:nth-child(2) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .picTransition .item:nth-child(3) { -webkit-animation-delay: 28s; -moz-animation-delay: 28s; -ms-animation-delay: 28s; animation-delay: 28s; } .picTransition .item:nth-child(4) { -webkit-animation-delay: 42s; -moz-animation-delay: 42s; -ms-animation-delay: 42s; animation-delay: 42s; } </code></pre> <p>I am making a mistake on the how to pause the slides. I have used the animation-play-state: paused, but it does not work. I can use the jquery function, but I really want to try and get this to work in css only. Am I screwing up on the parent child relation? Or is this timing sequence not supported or messing with the pause issue? Perhaps I need to do a hover type pause and build a new div for that? I know I am making a simple mistake.</p>