How to remove size during animation?

Question

css

My block looks at the state:

<div className={this.state.isBonus ? "checkout__bonus-types--active": "checkout__bonus-types"}>
</div>

Styles

checkout__bonus-types {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
    transition: all 0.5s ease-out;
}
  checkout__bonus-types--active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: all 0.3s ease-out;
    }

How to correctly resize a block after animation?
I would very much like to use scaleY (0) but the animation changes with it, and I need it

opacity: 0;
    transform: translate3d(0, -20%, 0);

Answer 1

here is the fiddle

what does "de-size after animation" mean, how should it look like?