End CSS3 keyframe animation quickly on &:hover using fast-forward technique

Feedback


Solution 1:

Consider updating

animation-duration

and

animation-fill-mode

to

forwards

for

:hover

.

I have assigned

animation-duration

to

0.1s

in this scenario, and it will maintain the final status by configuring

animation-fill-mode: forwards;

.

.hitbox {
    position: relative;
    width: 100px;
    height: 50px; 
    cursor: pointer;
    border: 3px solid yellow;
    border-radius: 5px;
    animation: pulse 2s ease-in-out infinite alternate;
    &:hover {
        animation: pulse 0.1s ease-in-out forwards;
    }
}


Solution 2:

It’s not (currently) possible.

daviestar summed it up quite well:

In my attempts to create a specific effect, I have encountered limitations. Currently, only transitions can be used for interactive CSS-only animations, while animation keyframes are reserved for non-interactive animations. Unfortunately, these two methods do not blend seamlessly. To work around this issue, the most effective approaches are to utilize (pseudo) elements and effects within nested structures, or to employ JavaScript to activate parent classes.

Frequently Asked Questions

Posted in Css