Neo Neo - 2 months ago 14
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

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;
}
Comments