css transition conflicts with animation when both are used

Question

I'm using tailwindcss and handling dynamic className of my React components with clsx.

Here is my code:

<div className={clsx("absolute top-[97%] left-[50%] z-[3] aspect-square w-1/3 translate-x-[-50%]", {
   "animate-[mid-coin-moving_5s_linear_infinite]": step === Steps.RECEIVE_CHEST,
   "translate-y-[-70%] transition duration-[1500ms] ease-linear": step === Steps.CLAIM_CHEST,
 })}
>
... child component
</div>

here is the definition of the animation:

@keyframes mid-coin-moving {
  50% {
    transform: translate(-50%, -10%);
  }
}

when I click a button to change step from Steps.RECEIVE_CHEST to Steps.CLAIM_CHEST, the transition seems to have no effect.

but if i remove this line "animate-[mid-coin-moving_5s_linear_infinite]": step === Steps.RECEIVE_CHEST, it works as expected

pls help me to solve this issue, thanks