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

Question

I am trying to add scale up animation on a div. I tried this using both transition and animation property.

In case of transition you can notice that when hovered out the animation is smoothly reversed. However, this doesn't happen when using animation property (the div transitions back to initial width instantly)

Can someone tell me:

1. Why this behaviour in case of animation only?
2. How can I achieve the same using animation property?

 .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

invert this part only

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

and to fix the animation when mouse out add a new keyframe

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

and apply it to the class .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>