[SOLVED] Stop animation on hover

Stop animation on hover

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.

#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 class="rotation" src="https://dummyimage.com/200x200/aaaaaa/fff" alt="image">
</div>

Solution

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 class="rotation" src="https://dummyimage.com/200x200/aaaaaa/fff" alt="image">
</div>