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

Question

这是以下屏幕截图中的圆形标志图标的问题。只要光标悬停在图像上，我希望它顺时针旋转45度并保持旋转为+形状;然后在光标离开图像时向后旋转。

这是我写到目前为止代码。当悬停图像正确旋转45'cw时，它立即返回到X形状。

#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); } } 

那么我该如何解决这个问题呢？我认为#icon应该稍微修改一下，因为即使在旋转之后，它仍然可以保持其原始状态。

Answer 1

使用transition而不是keyframes动画：

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

 
img:hover { 
 
    transform: rotate(45deg) 
 
}

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

Answer 2

尝试使用animation-fill-mode: forwards; 或使用animation:cw 0.4s linear 1 forwards;