Question

I’m trying to

• PLAY animation on hover.
• PAUSE animation on hover out (i.e don’t go back to frame 0).

Is it not possible to use -webkit-animation-play-state: paused; on a parent div?

See an example here, when you hover out it goes back to frame 0.

I don’t want to use JS.

Answer 1

example jsfiddle

set the animation on #tech with play state paused

#tech {
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

then change play-state to running on hover

#tech:hover{
    -webkit-animation-play-state:running;
}