如何在关键帧中实现鼠标移出的反向动画

Question

我正在尝试在 div 上添加放大动画。 我尝试使用 transition 和 animation 属性。

在transition 的情况下，您会注意到当悬停时动画会平滑反转。但是，使用animation 属性时不会发生这种情况（div 会立即转换回初始宽度）

谁能告诉我：

1. 为什么仅在 animation 的情况下会出现这种行为？
2. 如何使用animation 属性实现相同的效果？

.animations {
  display: flex;
  padding: 80px;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
  width: 200px;
  height: 200px;
  margin: 40px;
  font-family: system-ui;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.animations > p {
  color: black;
  flex: 1;
  text-align: center;
}
.animations .animated-box {
  flex: 2;
  width: 100%;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.animated-box.scale-up {

}
.animated-box.scale-up:hover {
   animation: scale-up 0.5s ease forwards;
 transform: scale(1);
}
.animated-box.scale-up-with-mouseout {
  transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
  transform: scale(1.2);
}
 
  
@keyframes scale-up {
  100% {transform: scale(1.2)};
  0%{transform: scale(1)};
}

<div class="animations">
  <div>
    <div class="animated-box scale-up">Hover me</div>
    <p>Scale up (with keyframes)</p>
  </div>
  <div>
    <div class="animated-box scale-up-with-mouseout">Hover me</div>
    <p>Scale up (with transition)</p>
  </div>
</div>

Answer 1

如果你想达到同样的效果，需要创建两个动画。一个用于悬停行为，第二个用于默认状态样式。但是（这不是错误）当页面第一次渲染动画开始以默认样式播放时。因为动画不需要用伪类隐式调用。

• transition - 是简单的开始-结束-开始动画。
• 动画 - 更高级的开始-结束动画，您需要在其中管理帧。

.animations {
  display: flex;
  padding: 80px;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
  width: 200px;
  height: 200px;
  margin: 40px;
  font-family: system-ui;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.animations > p {
  color: black;
  flex: 1;
  text-align: center;
}
.animations .animated-box {
  flex: 2;
  width: 100%;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.animated-box.scale-up {
  animation: scale-down 0.5s ease-in forwards;
}

.animated-box.scale-up:hover {
  animation: scale-up 0.5s ease-in forwards;
}

.animated-box.scale-up-with-mouseout {
  transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
  transform: scale(1.2);
}

@keyframes scale-up {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes scale-down {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

 <div class="animations">
      <div>
        <div class="animated-box scale-up">Hover me</div>
        <p>Scale up (with keyframes)</p>
      </div>
      <div>
        <div class="animated-box scale-up-with-mouseout">Hover me</div>
        <p>Scale up (with transition)</p>
      </div>
    </div>