I’ve just posted a new CSS video tutorial all about playing a CSS animation only on :hover using the animation-play-state property. It’s one of the many ways you could use this property, of course, but it’s a fun one! Check out the video below for the whole story, or check out the super commented example on codepen.

The Tutorial:

The End Result:

/* animation-play-state and playing an animation on hover */

body {padding:4em; background:#fcfcfc;}

.wrap {width:200px; margin:auto; position:relative;}

.msg {
  color: whitesmoke;
  text-align:center;
  font-family: 'Bree Serif', serif;
  font-size:3.5em;
  width:200px;
  position:absolute;
  margin:55px 0 0 2px;
  pointer-events: none;
}

.sticker {
  width:200px;
  height:200px;
  position:absolute;
  background: url(https://dl.dropbox.com/u/1143870/i/sticker.png) top center no-repeat; 
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
}

.sticker:hover {
  animation-play-state: running;
}


@keyframes spin {
  100% {transform: rotate(1turn); }
}Check out this Pen!

Check it out on codepen

For more CSS animation tutorials check out my previous tutorial on animation-fill-mode or my lynda.com course . I’ll be covering things like this (and lots more) in my workshop at the Interlink conference in June too.

Have a comment or question? Find me on twitter or email me.