How to prevent a CSS animation from rerunning after a second hover animation-CodePudding

I have an animation when the page load and when you hover over the element. my issue is when the hover animation finishes the first one replays. is there any way to stop/prevent it from replaying?

img {
    height: 40px;
    width: auto;
    position: absolute;
    animation-name: test1;
    animation-duration: 4s;
}
img:hover {
    animation-name: test2;
    animation-duration: 4s;
}
@keyframes test1 {
    from {height: 40px}
    to {height: 80px}
}
@keyframes test2 {
    from {height: 40px}
    to {height: 80px}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="https://media.discordapp.net/attachments/874191575004094524/946077618992738375/grey.png" alt="">
</body>
</html>

CodePudding user response：

The animation-* properties (like animation:, animation-name:, animation-duration:, etc) are multi-valued properties, just like background-image.
When the effective value of a multi-value property for an element changes (e.g. setting an entirely new background-image: or animation: when an element already has a multiple values for that property) then CSS will replace the entire list of values.
So if one rule sets animation-name: foo; and another (temporarily applied) rule sets animation-name: bar; then that counts as removing foo and adding bar, rather than simply adding bar to the existing list of animations.
And CSS animations (by default) start when they are added, and cannot be controlled after they have been removed.
So in your case, the test1 animation restarts because your :hover rule removes the test1 animation from img's animation-list (and adds test2), and then when the :hover state is left the test1 animation is re-added, which makes it restart the test1 animation again.

The fix is to not remove the test1 animation from the :hover state, like so:

    img {
        animation-name: test1;
        animation-duration: 4s;
    }
    img:hover {
        animation-name: test1, test2;
        animation-duration: 4s, 4s;
    }

Demo:

I've renamed test1 to onLoad and test2 to onHover and sped-up the animations to 1-2s (from 4s) for clarity.
The image will rotate on-load, and will increase in size on hover.
Notice that after you stop hovering the image, it won't rotate again.

img {
    height: 40px;
    width: auto;
    position: absolute;


    animation-name: onl oad;
    animation-duration: 1s;
}
img:hover {
    animation-name: onl oad, onHover;
    animation-duration: 1s, 2s;
}
@keyframes onl oad {
    from { transform: rotate(0deg); }
    to   { transform: rotate(179deg); }
}
@keyframes onHover {
    from { height: 40px; width: 40px; }
    to   { height: 80px; height: 80px; }
}

<img src="https://i.stack.imgur.com/pVgz6.png" alt="">