CODEWITHSUNDEEP
cssanimationhover
Neo
Neo

Reputation: 1037

Play CSS animation on hover, pause on hover out

I'm trying to

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.

Upvotes: 10

Views: 14526

Answers (4)

User 1058612
User 1058612

Reputation: 3819

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

Upvotes: 3

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

Reputation: 1

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

Upvotes: 0

Joy
Joy

Reputation: 9550

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/

Upvotes: 0

MikeM
MikeM

Reputation: 27405

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

Upvotes: 13

Related Questions