title: Transform scale animation begins from wrong position
body: <p>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:</p>
  
  <pre><code>.gameContainer__deck {
    width: 60%;
    height: 700px;
    z-index: 2;
  
    display: flex;
    flex-wrap: wrap;
  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
  }
  </code></pre>
  
  <p>And this is my animation:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>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.</p>