How To Play And Pause An Animation Set To Hover


show more Playing and pausing an animation on hover provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Playing and pausing an animation on hover

In previous tutorials, we created animations that played regardless of user input, as animations tend to do. CSS is limited in how much they can respond to user input on its own without help from something like JavaScript. But we can still use that input a little bit here and there. In this tutorial, we're going to create a button that cycles its background color in response to the mouse pointer hovering over it and then pauses the animation when the mouse leaves, just like this button we're looking at right now. When we hover over it, the animation plays and our background color cycle in an interesting little glowing pattern, and when we hover off the animation pauses and stops.

You can follow along with the exercise files for this tutorial, or you can skip ahead to the final to see how everything works out. Let's go to Coda and take a look at the HTML behind this example. It's a very simple HTML, once again, and we have a div with the class of button and within that we have a lin...

Playing and pausing an animation on hover
Video duration: 6m 20s 1h 56m Intermediate

Viewers:

Playing and pausing an animation on hover provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...