React Transition Group probem with the same timeout

Question

I want to add animation before I remove a component from dom like this:

<CSSTransition
  in={showCard}
  timeout={500}
  unmountOnExit
  classNames='table-card'
>
<div className={`table-card bg-black`}>
  <div className={`table-card-inner `}>
   <Button onClick={hideCardHandler}>Close</Button>
  </div>
</div>
</CSSTransition>

The styles are:

&-exit-active {
  animation: hideCard 500ms ease-in-out;
}
&-exit-done {
  opacity: 0;
}
&-enter-active {
  animation: showCard 500ms ease-in-out;
}

where

@keyframes showCard {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes hideCard {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

The problem is that when the card is open and I click to close it, it closes with the animation but it get visible again just for a few ms. I decreased the timeout on CSSTransition to 450` and it helped but I dont know why there is the problem when trasitions are equal