html - 在悬停时旋转横幅会导致它痉挛

Question

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

我目前在 CSS 中这样做:-

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

但是，当用户悬停在图像边缘时，图像会旋转并且不再悬停在边缘，导致图像“痉挛”。

如何实现正确的外观和稳定的旋转？ JavaScript 也可以。

Answer 1

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

Working Demo

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

更新:

如果你可以使用动画，你可以做到这一点

Updated Demo

.img-responsive {
  animation: rotateme;
}

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