Play CSS animation on hover, pause on hover out

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

Answer 2

I was looking for this as well, and @MikeM's answer got me where I needed to go, and with @HellGate's comment on that answer concerning Chrome:

you need the pause state after the animation else it does not work

I was interested in how to pause animation on a PNG sprite sheet when it was inactive, and continue/resume on hover, so the accepted answer helped in that regard.

Here is a demo showing how this can be done on a PNG Sprite Sheet (credits to the sprite, and original CSS go to Guil Hernandez and his awesome blog post here): CodePen.

The important CSS parts:

.monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  -webkit-animation: monsterAnimation .8s steps(10) infinite;
  animation: monsterAnimation .8s steps(10) infinite;
  -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

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

@keyframes monsterAnimation {
  100% { background-position: -1900px; }
}