在用户停止徘徊在图像上后，将图像动画到其原始位置

Question

当用户徘徊时，我正在将汉堡菜单图像旋转90度。请参阅此处的JSFIDDLE

问题是用户从图像移开时，它回到了原始位置，但是我希望它过渡到原始位置，就像它最初动画的速度相同，提供了平稳的过渡。

有人知道如何做。

还请参阅下面的代码。

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{}中设置初始动画状态来实现此目标，因此当您不徘徊时，它将触发返回动画。

.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小提琴