悬停时旋转横幅会导致其痉挛

Question

我的网站上有一张图片。当我将鼠标悬停在它上面时，我希望它做一个 360 度旋转动画。

我目前正在 CSS 中这样做：-

.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
}

但是，当用户将鼠标悬停在图像的边缘时，图像会旋转，并且不再悬停在边缘上，从而导致图像"痉挛"。

如何实现适当的外观和稳定的旋转？JavaScript也可以工作。

Answer 1

您可以通过在过渡中添加小延迟来修复它

工作演示

.img-responsive:hover {
  transition-duration: 2s;
  transform:rotate(360deg);
  transition-delay: 0.5s;
}

更新：

如果可以使用animation，则可以这样做

更新的演示

.img-responsive {
  animation: rotateme;
}
.img-responsive:hover {
  animation: rotateme 5s; 
}

Answer 2

悬停时可以使图像变大，这样用户就很难意外取消悬停

如果没有填充或边距，请设置

.img-responsive:hover {
    transition-duration: 2s;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
    padding: 50px;
    margin: -50px;
}

将填充增加到 50px 可确保鼠标仍在其上。以相同的金额更改边距，但在相反的意义上使其保持在同一位置。

小提琴