How to achieve reverse animation on mouse out in keyframes - html

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:
Why this behaviour in case of animation only?
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>