DEV Community

Discussion on: Pausing CSS Animations on Hover

View post

Replies for: 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...

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.