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

Pausing CSS Animations on Hover

jackharner profile image Jack Harner πŸš€ 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);
  }
}

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;
  }
}

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.

Posted on by:

jackharner profile

Jack Harner πŸš€

@jackharner

I'm Jack! I'm a Front-End Engineer. I have experience with WordPress, React, Linux Admin, & More! Let's Chat!

Discussion

pic
Editor guide
 

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

 

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.