如何旋轉圖像並在光標懸停時保持旋轉狀態？

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;