如何使用关键帧在鼠标移出时实现反向动画答案

【问题标题】：How to achieve reverse animation on mouse out using keyframes如何使用关键帧在鼠标移出时实现反向动画
【发布时间】：2021-10-01 17:41:29
【问题描述】：

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

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

谁能告诉我：

为什么仅在 animation 的情况下会出现这种行为？
如何使用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>

【问题讨论】：

标签： css css-animations css-transitions

【解决方案1】：

只反转这部分

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

并在鼠标移出时修复动画添加一个新的keyframe

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

并将其应用于.animated-box.scale-up类

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

.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 forwards;
}
.animated-box.scale-up:hover {
   animation: scale-up 0.5s ease 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 {
  100% {transform: scale(1.2)};
  0%{transform: scale(1)};
}
  
@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 (doesn't work)</p>
  </div>
  <div>
    <div class="animated-box scale-up-with-mouseout">Hover me</div>
    <p>Scale up (works)</p>
  </div>
</div>

【讨论】：

to fix the animation when mouse out add a new keyframe 这也会在我不想要的初始渲染时触发