Stop animation on hover-CodePudding

I would like to apply my transformation (rotation) active until the hover state is out. Unfortunately, after the rotation, my image retrieve his original rotation (to 0deg) immediately even the mouse is still over my picture.

I saw a lot of similar issues and answers but none of them are solving my problem.

Excuse me for my English and have a nice day! Best regards. Nicolas.

#centerDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rotation{
    transform: rotate(0deg);
    animation-play-state:paused;
}
.rotation:hover{
    animation-name: rotation;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction:normal;
    animation-play-state:running;
}
@keyframes rotation{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-10deg); 
    }
}

<div id="centerDiv">
  <img  src="https://dummyimage.com/200x200/aaaaaa/fff" alt="image">
</div>

CodePudding user response：

If you want the animation to go back to a rotation of 0deg, then you don't really need animation, but transition.

#centerDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rotation{
    transform: rotate(0deg);
    transition: transform 200ms;
}
.rotation:hover{
    transform: rotate(-10deg);
    transition: transform 1000ms;
}

<div id="centerDiv">
  <img  src="https://dummyimage.com/200x200/aaaaaa/fff" alt="image">
</div>

CodePudding user response：

Set the animation-fill-mode property in the .rotation class to forwards; if you tried setting it in the :hover state - it would've reset to the initial property value after the element is no longer hovered.

#centerDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rotation{
    transform: rotate(0deg);
    animation-play-state:paused;
    animation-fill-mode: forwards;
}
.rotation:hover{
    animation-name: rotation;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction:normal;
    animation-play-state:running;
}
@keyframes rotation{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-10deg); 
    }
}

<div id="centerDiv">
  <img  src="https://dummyimage.com/200x200/aaaaaa/fff" alt="image">
</div>

CodePudding user response：

I'm not sure I got your question right but if you want your picture to keep rotating as long as the mouse is hovering on it, then you can set the

animation-iteration-count: infinit;

instead of setting it to 1.

This way the animation keeps going on a loop. Hope that helps.