DEV Community

Cover image for Pausing CSS Animations on Hover

Pausing CSS Animations on Hover

Jack Harner 🚀 on March 28, 2020

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...
Read full post
Collapse
 
h3c70r profile image
Hector del Angel • • Edited

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.

#yourid:hover{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Hope this helps.

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
 
jackharner profile image
Jack Harner 🚀 •

Totally just saw this, sorry. 🙈

I don't think that's possible with just CSS unfortunately.

I tried out something like this:

div{
    animation: 3s pulse infinite linear;
    transition: animation-duration 300ms;
    &:hover{
        animation-duration: 99s;
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
peacefullatom profile image
Yuriy Markov •

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

Collapse
 
jackharner profile image
Jack Harner 🚀 •

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.