Neo Neo - 1 year ago 181
CSS Question

Play CSS animation on hover, pause on hover out

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 Source

example jsfiddle

set the animation on #tech with play state paused

#tech {
    -webkit-animation: moveSlideshow 10s linear infinite;

then change play-state to running on hover

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download