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.
Top comments (5)
So I just stumbled upon this cool article but, alas, I'm not using SCSS π
Then I found this codepen:
codepen.io/MarkAlmond/pen/xxgmQq
So I just added an id to the divs I needed the animation paused on.
Hope this helps.
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!
Totally just saw this, sorry. π
I don't think that's possible with just CSS unfortunately.
I tried out something like this:
but animation-duration isn't transition-able and it jumps the div to wherever it would be if the animation-duration was set to 99s from when the page loaded. (codepen.io/jackharner/pen/rNGodmm)
You'd probably have to do some JS magic with GSAP to get that to work.
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.