Question

CSS过渡按照相反的过渡规则，以动画方式恢复为先前的状态。但是动画却没有。它们只是突然回到原始状态（例如，当:hover或类被删除时）。有没有一种方法可以使动画表现得像过渡（如下面的代码）。

.box {
  width: 50px;
  height: 50px;
}

.box.transition {
  background-color: green;
  transition: 500ms linear all;
}

.box.transition:hover {
  width: 100px;
  height: 100px;
}

.box.animation {
  background-color: red;
  animation-duration: 500ms;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.box.animation:hover {
  animation-name: zoom;
}

@keyframes zoom {
  to {
    width: 100px;
    height: 100px;
  }
}

<!-- If I "unhover" .box.animation, it goes back to the original state abruptly -->
<div class="box transition"></div>
<div class="box animation"></div>

Answer 1

动画一样的过渡

是的，您可以使它们的行为类似但不相同，但：hover不能。

当您停止悬停元素时，悬停状态结束。因此，当您停止将其悬停时，将立即删除目标：hover的css规则。

转换定义了对不同状态进行更改时的处理方法。
动画从一种状态转到由动画定义的另一种状态。

设置动画方向将使其看起来更接近过渡。

animation-direction: alternate;将从头到尾循环播放动画。

悬停后像过渡一样如何反转动画？

1 个答案:

动画一样的过渡