ユーザーがイメージ上でホバリングを停止した後でイメージを元の位置にアニメ化する

Question

ユーザーがホバーしたときにハンバーガーメニューイメージを90度回転させています。 See jsfiddle here

問題は、ユーザーが画像を元の位置に戻すときですが、最初に元の位置に戻って元の位置に戻してもらいたいということです。

誰でもこれを行う方法を知っていますか？

便宜上、以下のコードを参照してください。あなたがホバリングしていないときに、それは、戻りアニメーションをトリガーする.menu-button img{}に初期のアニメーション状態を設定することによって、これを達成することができます

HTML

<button class="menu-button"><img src="https://api.icons8.com/download/d419bb211b7f4ad40cf595fb3ebc9464cdf2065e/Android_L/PNG/256/User_Interface/menu-256.png"></button> 

CSS

.menu-button img { 
    width: 50px; 
    height: 50px; 
} 

.menu-button img:hover { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    -webkit-transition: transform 1000ms ease-in-out; 
    -moz-transition:transform 1000ms ease-in-out; 
    -ms-transition:transform 1000ms ease-in-out; 
} 

Answer 1

ホバーが有効もはやであるときは、返された状態をアニメーション化しないていません。

-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
transform: rotate(90deg); 

これはyaのためにこれを行う必要があります。 https://jsfiddle.net/r7buoac0/2/

Answer 2

。

.menu-button img { 
    width: 50px; 
    height: 50px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: transform 1000ms ease-in-out; 
    -moz-transition:transform 1000ms ease-in-out; 
    -ms-transition:transform 1000ms ease-in-out; 
} 

.menu-button img:hover { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    -webkit-transition: transform 1000ms ease-in-out; 
    -moz-transition:transform 1000ms ease-in-out; 
    -ms-transition:transform 1000ms ease-in-out; 
} 

JS FIDDLE