Question

当用户在其上盘旋时，我将汉堡包菜单图像旋转90度。 See jsfiddle here

问题是，当用户离开图像时，它会回到原来的位置，但我希望它转换回原始位置，与原始动画相同的速度，提供平滑过渡。

有谁知道如何做到这一点。

为方便起见，请参阅下面的代码。

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

您可以通过在.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 FIDDLE

Answer 2

当悬停不再有效时，您不会为返回的状态设置动画。

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

这应该为你做。 https://jsfiddle.net/r7buoac0/2/

用户停止在图像上停留后，将图像设置为原始位置

2 个答案: