平滑的鼠标移出动画

Question

我有一个菱形的div，它通过使用CSS动画在悬停时围绕其自身的轴旋转360度。

我无法解决如何在不再悬停时如何确保平稳返回到原始状态？

到目前为止，当钻石处于转弯中间时，它会“跳跃”。我希望它能顺利进行。CSS动画可以做到吗？如果没有，也许用JS？

.dn-diamond {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #000;
  transform: rotate(-45deg);
  margin: 50px;
  overflow: hidden;
}
.dn-diamond:hover {
  animation: spin 3s infinite linear;
}
@keyframes spin {
  from { transform: rotateY(0deg) rotate(-45deg); }
  to   { transform: rotateY(360deg) rotate(-45deg); }
}

<div class="dn-diamond">

这是JSFiddle

我试图使用该过渡，但无法保持其原始的变形形状（它恢复为正方形，而不是菱形）。

Answer 1

您应该为此使用过渡。当鼠标移出元素时，它们将使您保持过渡平滑。

范例：

.dn-diamond {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #000;
  transform: rotateY(0deg) rotateZ(-45deg);
  transition: transform 3s linear;
  margin: 50px;
  overflow: hidden;
}
.dn-diamond:hover {
  transform: rotateY(360deg) rotateZ(-45deg);
}

<div class="dn-diamond">

您还可以通过将transition属性设置为normal和hover状态来控制当光标移出元素时的过渡速度。

范例：

.dn-diamond {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #000;
  transform: rotateY(0deg) rotateZ(-45deg);
  transition: transform 0.5s linear;
  margin: 50px;
  overflow: hidden;
}
.dn-diamond:hover {
  transform: rotateY(360deg) rotateZ(-45deg);
  transition: transform 3s linear;
}

<div class="dn-diamond">

请注意，在以上演示中，未包含供应商前缀。检查canIuse知道你根据你想要支持的浏览器需要哪个供应商的前缀。