What's wrong with this TranslateY animation in CSS ?[Solved]

Question

In this code, the positions of both boxes resets to their default positions after translateY animation, why??? somebody help.
https://code.sololearn.com/WFKmGq4Ir45C/?ref=app

Answer 1

i think by default the elements will go back to their original position after animation end..
probably what u want is
animation-fill-mode: forwards;
add this to the elements that have animation run on

Answer 2

Thanks a ton!! Didn't know that property. That's just what i needed in my code.