流畅的鼠标移开动画

Question

我有一个菱形 div，它在悬停时使用 CSS 动画绕着自己的轴旋转 360 度。

我想不通如何确保不再悬停时平滑回到原始状态？

到目前为止它 "jumps" 当钻石在它的回合中间时。我希望它顺利。可以使用 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

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

示例：

.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">

您还可以通过在正常和悬停状态下设置过渡属性来 控制光标移出元素时的过渡速度 。

示例：

.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 以根据您要支持的浏览器了解您需要哪些供应商前缀。

Answer 2

给 transitions transform:

  -webkit-transition: -webkit-transform 3s ease-in;
     -moz-transition: -moz-transform 3s ease-in;
       -o-transition: -o-transform 3s ease-in;
          transition: transform 3s ease-in;

片段：

.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);
  -webkit-transition: -webkit-transform 3s ease-in;
  -moz-transition: -moz-transform 3s ease-in;
  -o-transition: -o-transform 3s ease-in;
  transition: transform 3s ease-in;
}

<div class="dn-diamond">

流畅的鼠标移开动画

Smooth mouse-out animation

css

css-transitions

css-animations