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!
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.