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

Question

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

这是我到目前为止编写的代码。悬停时，图像会正确顺时针旋转 45'，但会立即变回 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">