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 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>