CSS关键帧-缩放和翻译

Question

I'm trying to scale and translate an absolute positioned div , but after the scale, the div won't move to the exact coordinates I gave it in my keyframe.

I know it's due to the coordinates of the div , which remains the same as when unscaled.

I could just adjust the final coordinates of my keyframe, but is there a smarter way to fix that?

---

Here's my code (vendor prefixes removed voluntarily), and here's a fiddle .

HTML

<div class="popin willGoToUpperLeft"></div>

CSS

.popin{
    width:400px;
    height:200px;
    position:absolute;
    top:300px;
    left:200px;
    background:url('//placekitten.com/400/200');
}

.willGoToUpperLeft{
  animation: scaleOut 1s ease-in-out 0s 1 normal forwards, 
             goToLeftCorner 1s ease-in-out 1s 1 normal forwards;
}

@keyframes scaleOut {
  0% { 
    transform: scale(1);
  }
  100% { 
    transform: scale(0.1);
  }
}
@keyframes goToLeftCorner {
  100% { 
    top: 0px;
    left: 0px;    
  }
}

Answer 1

Ended up using

transform-origin: 0% 0%;

to keep the original coordinates.

It's a workaround, the effect isn't as awesome as scaled from center, but that will work for now.

If someone has a smart solution to keep scaling from center, I'm interested!