DEV Community

loading...
Cover image for Pausing CSS Animations on Hover

Pausing CSS Animations on Hover

Jack Harner πŸš€
I'm Jack! I'm a Freelance Developer. I have experience with WordPress, Shopify, BigCommerce, React, Linux Admin, & More! Ask Me Anything!!
Originally published at jackharner.com on ・2 min read

CSS Animations are an easy, lightweight way to add a little motion and excitement to a page. You definitely don't want to overdo it, though. One of the most frustrating things as a user is when you go to click on something, it moves, and you miss. Today I'm going to show you how to pause your CSS animations when someone goes to click on them.

The Animation

We'll start with one of my favorite simple animations, the Pulse:

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
Enter fullscreen mode Exit fullscreen mode

I've used that animation many times to emphasize a discount, bring focus to the best deal on a Pricing page, or even just to make a beating heart.

Treat Your Users Like Stormtroopers - Avoid Moving Targets

If there are clickable things inside the thing you're animating, you don't want your users to have to click on moving targets. It's so frustrating to click and miss, let alone click, miss, and click on something else. Luckily, there's a really simple way to pause CSS Animations in CSS without JavaScript. The key to it all is the animation-play-state property. Let's see it in (SCSS) action:

.box {
  animation: pulse 3s infinite;

  &:hover {
    animation-play-state: paused;
  }
}
Enter fullscreen mode Exit fullscreen mode

As you can see (Click Here for a Live Demo), it starts and stops the animation when you hover your mouse in and out of it.

By setting the animation-play-state to paused on hover, the animation will pause, your click targets will stop moving, and your users will be happy. I had experimented with basically removing the animation on hover but that caused lots of jumps and skips. animation-play-state literally just pauses the animation and un-pauses when you stop hovering.

Super simple way to have more user-friendly animations on your site.

Discussion (3)

Collapse
geroalexander profile image
Gero Kassing

Just what I needed, any chance that on hover the animation doesn't just stop abruptly but rather slows down? I have a carousel and when I hover I'd like it to slow down before stopping - rather than just yanking to a halt. CHEERS!

Collapse
peacefullatom profile image
Yuriy Markov

Nice article. Thank you. But does this solution work on touch devices?

Collapse
jackharner profile image
Jack Harner πŸš€ Author

I just tested the demo on my blog from my Galaxy Note 8 and the hover event happens when you tap on it and then resumes the animation when you tap on something else (but not as I scroll).

Not sure about other devices. Might have to do some mobile magic depending on the use case.