Hello everybody! There is the following CSS code:

.scontainer { position: relative; width: 500%; animation-name: slideranim; animation-duration: 30s; animation-delay: initial; animation-iteration-count: infinite; padding: 0; margin: 0; left: 0; } @keyframes slideranim { 10% { left: 0%; } 20% { left: -100%; } 30% { left: -100%; } 40% { left: -200%; } 50% { left: -200%; } 60% { left: -300%; } 70% { left: -300%; } 80% { left: -400%; } 90% { left: -400%; } 100% { left: 0%; } }

And this slows down the animation, but the trouble is that the animation immediately stops:

 .scontainer:hover { animation-play-state: paused; }

Not finished intermediate animation.

Now the actual question is how to implement, so that the slider scrolls through the slides, say, the second slide, scrolls to the end, and does not freeze, say, to:

 left: 145%;

And scrolled to the end and froze, that is, it would be:

 left: 200%;

    1 answer 1

    Here is a hack:

    We cover the top of the slider with a transparent <div> that will take over the hover event. It remains only to make the animation of the z-index slider, so that at the moment when it moves, it was under the transparent <div> , and when it does not move - above it:

     .... 10% { left: 0%; z-index:3; } 11% { z-index:0; } 19% { z-index:0; } 20% { left: -100%; z-index:3; } 30% { left: -100%; z-index:3; } ....

    Total working demo:

    Covering a <div> done with a stroke for testing purposes, of course the border stroke will need to be removed

     body { overflow: hidden; } .scontainer { position: relative; width: 500%; animation-name: slideranim; animation-duration: 30s; animation-delay: initial; animation-iteration-count: infinite; padding: 0; margin: 0; left: 0; font-size: 0; } @keyframes slideranim { 0% { z-index: 3; } 10% { left: 0%; z-index: 3; } 11% { z-index: 0; } 19% { z-index: 0; } 20% { left: -100%; z-index: 3; } 30% { left: -100%; z-index: 3; } 31% { z-index: 0; } 39% { z-index: 0; } 40% { left: -200%; z-index: 3; } 50% { left: -200%; z-index: 3; } 51% { z-index: 0; } 59% { z-index: 0; } 60% { left: -300%; z-index: 3; } 70% { left: -300%; z-index: 3; } 71% { z-index: 0; } 79% { z-index: 0; } 80% { left: -400%; z-index: 3; } 90% { left: -400%; z-index: 3; } 91% { z-index: 0; } 99% { z-index: 0; } 100% { left: 0%; z-index: 3; } } .scontainer:hover { animation-play-state: paused; } .scontainer>div { background: #ccc; width: 20%; display: inline-block; height: 100px; } .scontainer>div:nth-child(even) { background: #ddd; } .hoverblock { position: absolute; z-index: 2; width: 100%; height: 100px; box-sizing: border-box; border: 1px dotted #777; } 
     <div class="hoverblock"></div> <div class="scontainer"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

    • Brilliantly! Thank! - MrMEX