Why does the transition execute instantly when hovered while in animation? - html

Question

#keyframes rightup {
0% {
transform-origin: top left;
}
5%,
30% {
transition: transform 1s ease-out;
transform-origin: top left;
transform: rotate(-20deg);
}
10%,
35% {
transition: transform 1s ease-in;
transform: translateY(-20px);
}
15%,
40% {
transition: transform 1s ease-out;
transform-origin: top right;
transform: rotate(20deg);
}
20%,
45% {
transition: transform 1s ease-in;
transform: translateY(-20px);
}
25%,
50% {
transform-origin: 0 0;
transform: translateY(0px);
}
}
body {
background-color: #82AAE3;
/*#91D8E4*/
}
.box {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 110px;
}
.giftbox {
position: absolute;
left: 5%;
height: 100px;
width: 100px;
border-radius: 5px;
background-color: #DC3535;
}
.lid {
position: absolute;
height: 20px;
width: 110px;
background-color: #DC3535;
border-style: solid;
border-color: black;
border-width: 0.1px;
border-radius: 5px;
animation-name: rightup;
animation-duration: 1s;
animation-iteration-count: 3;
animation-delay: 1s;
}
.ribbon-h {
position: absolute;
height: 20px;
width: 100px;
top: 40%;
left:0;
background-color: #FFE15D;
}
.ribbon-v {
position: absolute;
height: 100px;
width: 20px;
left: 40%;
top:0;
background-color: #FFE15D;
}
.box:hover {
transition: transform 400ms ease-in-out;
transform: scale(1.3);
}
.box:hover .lid {
animation:none;
transition: transform 400ms ease-in-out;
transform-origin: top left;
transform: rotate(-120deg);
}
<div class="box">
<div class="giftbox">
<div class="textmsg"><p></p></div>
<div class="ribbon-h">
</div>
<div class="ribbon-v">
</div>
</div>
<div class="lid"></div>
</div>
When hovered over while the animation is running , the transition mentioned in hover state executes instantly.
While when hovered over after the animation is done , the transition mentioned in hover state executes according to the duration specified.
tried adding play-state:paused too , but that made it even weirder.