首页 文章

平滑的鼠标移动动画

提问于
浏览 次
2

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

我不能解决如何确保 smooth going back to the original state 何时不再悬停？

到目前为止，当钻石处于转弯中间时，它会“跳跃” . 我希望它顺利 . 是否可以使用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

我试图使用过渡，但无法保持它的原始变形形状（它回到了正方形，而不是钻石） .

css css3 css-transitions css-animations

2 回答

  • 4

    你应该使用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">

    通过在正常和悬停状态下设置过渡属性，当光标移出元素时，您也可以 control the speed of the transition .

    示例：

    .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以了解您需要哪些供应商前缀 .

    回复于
  • 3

    transform 给 transitions ：

    -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;

    Snippet:

    .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">
    回复于

相关问题