悬停时如何过渡，其中悬停时使用动画

Question

我在悬停时在 div 内的 X 轴上对文本从 0 到 100 像素进行动画处理。问题是当我将鼠标悬停在 div 上时，动画会很快恢复。我需要一个过渡效果才能看起来不错。请帮帮我。谢谢

我尝试在 div 的正常状态和 div 的悬停状态上应用转换，但没有任何效果

Answer 1

您可以仅在CSS中尝试此操作，但建议使用JavaScript，因为当页面完成动画然后关闭时，然后在悬停时正常工作，我确实强制宽度以10px开始和结束，否则您无法悬停超过它。

div.parent {
  display: block;
  width: 100%;
  height: 64px;
}

div.child {
  height: 64px;
  width: 10px;
  background: red;
  animation-name: htz; /* Default animation for non-hover state */
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

div.child:hover {
  animation-name: zth; /* Override animation for hover state */
}

@keyframes zth {
  from {
    width: 10px;
  }
  to {
    width: 100%;
  }
}

@keyframes htz {
  from {
    width: 100%;
  }
  to {
    width: 10px;
  }
}

<div class="parent">
  <div class="child">
  </div>
</div>