there is an animation

@keyframes sprite-x { 0% { background-position-x: 0; } 100% { background-position-x: -8192px;} } .element { width: 1638px; height: 473px; background-image: url('image'); background-repeat: none; animation: sprite-x 0.5s steps(6) infinite, }

It is necessary that about 90% of this animation be re-launched, but the first one is not interrupted at the same time, but it plays until the end, and then it stops. And so endlessly: the same animation runs 90% without stopping the previous one, until the last one plays to the end.

enter image description here Horizontal scale is animation time.

    1 answer 1

    In the animation-delay property, specify two values ​​separated by commas. You may have to change the animations so that they have an equal duration.

    • So the animation is the same - the same duration, respectively - ruslik
    • @ruslik, apparently I don’t understand something and the question should be clarified ... - Qwertiy ♦
    • the same animation is always played, only 90% of the first playback starts the animation a second time, but the first one does not stop and ends up playing until the end, and so in the cycle - ruslik
    • If you run the same animation again, the same properties should be animated. How do you want to simultaneously animate the same properties? And in the question I see two animations. - Qwertiy ♦
    • that is, you need 2 blocks with animation and show alternately - ruslik