10

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.

brasofilo
  • 25,496
  • 15
  • 91
  • 179
Neo
  • 1,027
  • 3
  • 12
  • 30

4 Answers4

13

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;
}
MikeM
  • 27,227
  • 4
  • 64
  • 80
3

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; }
}
Community
  • 1
  • 1
User 1058612
  • 3,739
  • 1
  • 27
  • 33
0

Check the JSFiddle here: http://jsfiddle.net/fRzwS/373/.

The animation doesn't stop because the late definition of animation overwrites the value of property animation-play-state. According to the W3C specification, animation:

The 'animation' shorthand property is a comma-separated list of 
  animation definitions, each of which combines seven of 
  the animation properties into a single component value.

And the seven properties are:

<single-animation> = <single-animation-name> || <time> 
  || <single-animation-timing-function> 
  || <time> || <single-animation-iteration-count> || <single-animation-direction> 
  || <single-animation-fill-mode> || <single-animation-play-state>

It is similar to the properties background and background-color.

So in the original code:

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

Property animation-play-state is set to be paused. However, the late property animation OVERWRITES this value by its default value running. So, you can either define the property animation-play-state later (http://jsfiddle.net/fRzwS/373/):

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

Or you can simply use (http://jsfiddle.net/fRzwS/374/):

-webkit-animation: moveSlideshow 10s linear infinite paused;

Here is another example which works on both Chrome and Firefox: http://jsfiddle.net/MaY5A/694/

Joy
  • 9,430
  • 11
  • 44
  • 95
0

I don't have enough reputation to comment other answers. Well. @MikeM 's way works but he did a little mistake. Look:

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

This doesn't work and this shouldn't work. Animation shorthand note overrides animation-play-state. You need reorder these strings to get it working

Михаил Чеберя
  • 1