Question

I have the following code which animates the image class while hovering over the container div. However, if the image is mid-animation and the user stops hovering the animation is paused – which looks sort of weird.

Is there a way to stop or revert a CSS animation to its static state?

.image{
    animation-play-state: paused;
    }

#container:hover .image{
    animation-play-state: running;
    }   

Answer 1

Get a screenshot of the image before the animation play perhaps?
.image1{
background-image: “yourimage”
}
#container:hover .image{
animation-play-state: running;
}

And set image1 as your static image and keep your hover as the animated. It’s not a fail proof, but should work in theory.