如何在光标悬停时旋转图像并保持旋转状态？

Question

It's an issue with the circular flag icon in the screenshot below. I want it to rotate 45 degrees clockwise and keep it rotated in + shape as long as the cursor is hovering on the image; then rotate back ccw when the cursor leaves the image.

This is the code I wrote so far. When hovering the image rotates 45' cw correctly but it goes back to X shape immediately.

#icon{
    display: inline-block;
    margin: 0 auto 0 0;
    width: 2.4em;
    height: 2.4em;
}

#icon:hover{
    -webkit-animation:cw 0.4s linear 1;
    -moz-animation:cw 0.4s linear 1;
    animation:cw 0.4s linear 1;
}

@-moz-keyframes cw { 100% { -moz-transform: rotate(45deg); } }
@-webkit-keyframes cw { 100% { -webkit-transform: rotate(45deg); } }
@keyframes cw { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }

@-moz-keyframes ccw { 100% { -moz-transform: rotate(-45deg); } }
@-webkit-keyframes ccw { 100% { -webkit-transform: rotate(-45deg); } }
@keyframes ccw { 100% { -webkit-transform: rotate(-45deg); transform:rotate(-45deg); } }

So how can I solve this problem? I think the #icon should be modified a bit because it might keep its original state even after rotation.

Answer 1

Use a transition instead of an keyframes animation:

 img { transition: all .2s ease; transform: rotate(0deg) } img:hover { transform: rotate(45deg) } 

 <img src="https://placehold.it/100x100"> 

Answer 2

Try using animation-fill-mode: forwards; or use animation:cw 0.4s linear 1 forwards;