From the course: CSS: Animation

Unlock the full course today

Join today to access over 23,000 courses taught by industry experts.

Pause and play with animation-play-state

Pause and play with animation-play-state - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

Pause and play with animation-play-state

“

- [Instructor] So far, we've been creating animations that play automatically on page load. But there are definitely times where you might want to change when an animation starts or temporarily pause an animation while it's playing. The animation-play-state property can be very useful for both those things. For this example, we're using this spinning sub sticker image. It's a little silly, but it totally works for what we're demonstrating here. We're going to use the animation-play-state property to have this sub spin only when we're hovering over it. And be paused when we're not. We're using hover in this example, because it's an easy input event for CSS to access. But you might find that changing the animation-play-state on events like click or scroll with the help of JavaScript to be even more useful. I've already got the keyframes for the spinning animation here, and we just saw it in action a minute ago. But I can…

Contents