CSS关键帧 - 缩放和翻译

Question

我正在尝试缩放和翻译绝对定位div，但在缩放后，div将不会移动到我在关键帧中给出的确切坐标。

我知道这是由于div的坐标，与未缩放时的坐标保持一致。

我可以调整关键帧的最终坐标，但有更聪明的方法可以解决这个问题吗？

---

这是我的代码（供应商前缀自愿删除）和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

结束使用

transform-origin: 0% 0%;

保持原始坐标。

这是一种解决方法，效果并不像从中心缩放那样棒，但现在可以使用。

如果某人有智能解决方案继续从中心扩展，我很感兴趣！