在用户停止在图像上悬停后，将图像动画到原来的位置。
在用户停止在图像上悬停后，将图像动画到原来的位置。
提问于 2016-06-20 21:07:35
当用户在上面盘旋时，我正在旋转一个90度的汉堡包菜单图像。请看这里的小提琴
问题是，当用户离开图像时，它会回到原来的位置，但是我希望它回到原来的位置，以原来动画的速度，提供一个平稳的过渡。
有人知道怎么做吗。
为了方便起见，请参阅下面的代码。
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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-20 21:17:55
当悬停不再有效时，您不会激活返回的状态。
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);这应该是为了你。https://jsfiddle.net/r7buoac0/2/
Stack Overflow用户
发布于 2016-06-20 21:16:50
您可以通过在.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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37931840
复制相关文章
相似问题
腾讯云开发者
