css: prevent reset of animation on mouse out?

Question

I have an animation that I'm using to make an image scroll:

.my-image:hover {
    -webkit-animation: my-image-anim 20s linear 0s infinite;
    animation: my-image-anim 20s linear 0s infinite;
}

@-webkit-keyframes my-image-anim {
    0%  { margin-left: 0%; }
    100% { margin-left: -100%; }
}

@keyframes my-image-anim {
    0%  { margin-left: 0%; }
    100% { margin-left: -100%; }
}

When I hover the mouse over the image, is scrolls to the left. When the mouse leaves the image, the animation resets to margin-left=0.

I would like the animation stop wherever it is on mouse exit, then resume when the mouse enters again. Is this possible to do using only css?

Answer 1

Yes. You want to use animation-play-state.

.my-image{
-webkit-animation: my-image-anim 20s linear 0s infinite;
animation: my-image-anim 20s linear 0s infinite;
animation-play-state: paused;
-webkit-animation-play-state: paused;
}

.my-image:hover{
animation-play-state: running;
-webkit-animation-play-state: running;
}