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

Question

下面的屏幕截图中的圆形标志图标存在问题。我希望它顺时针旋转45度，只要光标悬停在图像上，它就会保持+ +形状旋转;然后在光标离开图像时旋转ccw。

这是我到目前为止编写的代码。当悬停图像旋转45＆＃39; 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动画：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用^((?=.*?[A-Z])|(?=.*?[0-9]))((?=.*?[a-z])|((?=.*?[A-Z])(?=.*?[0-9]))).{8,30}$ 或使用animation-fill-mode: forwards;