Transform scale animation begins from wrong position

Question

I'm learning CSS animations and I've came across a problem with transform: scale(); I have a element that is centered with transform: translate(); like this:

.gameContainer__deck {
  width: 60%;
  height: 700px;
  z-index: 2;

  display: flex;
  flex-wrap: wrap;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}

And this is my animation:

@keyframes scale-down {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0);
    transform-origin: bottom right;
  }
}

.anScaleDown {
  animation: scale-down 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

The animation begins from the position that is defined by top and left properties and it doesn't take into account transform: translate(-50%, -40%); rule. I would like that element to be animated from the position that is defined with translate property. I was trying to find a solution to this, however the only thing that I came up is to center it in a different way, and I can't do that because I need a width that is responsive.

Answer 1

@keyframes scale-down {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0);
    transform-origin: bottom right;
  }
}

here you're resetting the transform property rather than appending to it

instead of

transform: scale(1);

use

transform: translate(-50%, -40%) scale(1);

make sure the new one is always at the end