悬停退出时连续旋转答案

【问题标题】：Continuous rotation on hover exit悬停退出时连续旋转
【发布时间】：2015-09-03 12:59:10
【问题描述】：

是否可以让 div 在悬停时旋转通过（有效地旋转到 360 度而不是 0）而不是逆时针向后移动？

如果可能的话，我宁愿不使用 JavaScript（包括 jQuery）——我意识到设置起来很简单

transform: rotate(360deg); /*also the vendor-specific versions*/

在使用 JS 的原始版本上（一旦达到 360 就将其重置为 0 而无需转换），但是否可以仅使用 CSS3 来做到这一点？

【问题讨论】：

啊，谢谢。我修复了这个问题，但之后没有保存小提琴。
something like this?
@Pete：不，这只是在悬停时将其旋转 360 度，然后在悬停时逆时针旋转 360 度。我希望在悬停时顺时针旋转 180 度，然后在悬停时再顺时针旋转 180 度。
你可以试试 this 和 CSS3 动画。我不确定这是否是您所追求的，因此不添加作为答案。我看到的一个问题是它在加载时也会旋转一次:(
@Harry：这太棒了！移动鼠标时有些卡顿，但这似乎是不可避免的。如果您将此添加为答案，我会接受。

标签： css css-animations

【解决方案1】：

使用 CSS3 动画，我们可以让块在悬停时从 0 度旋转到 180 度，然后在不悬停时从 180 度旋转到 360 度。

#block {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 100px;
  top: 100px;
  background: black;
  color: white;
  animation-name: out;  /* animation to rotate on hover out*/
  animation-duration: 1s;  /* duration for the animation, increase it to slow it down*/
}
#block:hover {
  animation-name: in;  /* animation to rotate on hover */
  animation-duration: 1s;
}
@keyframes in {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes out {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="block"></div>

注意：

这也会导致块在页面加载时旋转。除了使用 JS 并消除对页面加载的影响之外，没有其他解决方案。
正如您所提到的，当我们以非常快的间隔悬停进出时，会出现一些卡顿现象。这可以通过查看答案here 和here 来解释。一旦动画不再适用（即选择器不再适用），动画将突然停止并返回到未转换的原始位置。

【讨论】：