html - 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%;

保持原始坐标。

这是一种解决方法，效果不如从中心缩放那么好，但是暂时可以使用。

如果有人有一个聪明的解决方案来保持从中心扩展，我很感兴趣！