为什么当我使用变换比例时它会移动动画 div 的位置

Question

编辑：我不认为这个问题应该被标记为可能的重复，因为它涉及分散注意力的 SVG 信息，我认为这是不必要的数学。

在下面的关键帧部分，当我省略transform: scalediv时，该 div 显示在页面中间。这就是我想要的。现在我想让 div 开始变大并且不透明度逐渐消失，而 div 变小并且 div 的中心应该位于页面的中心。当我添加变换比例时，div 不再在中心设置动画。为什么？我该如何解决？

   .popup{
        position: absolute;
        width:400px;
        height: 300px;
        left: 50%;
        top: 50%;
        background: limegreen;
        border: 5px solid silver;
        transform: translate(-50%, -50%);
        transition: all 2s;
        opacity: 0;

    }
    .anim{
        animation: popAnim 2s forwards;
    }
    @keyframes popAnim{
        0%{
            transform : scale(1.5);
            opacity: 0;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

html：

<div class="popup">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error inventore molestiae, dignissimos ducimus adipisci sint suscipit dolor blanditiis fugit, quia aspernatur quos, facere nostrum! Distinctio praesentium saepe, quaerat modi fuga.</div>
<button class="click">click me</button>

查询：

$(document).ready( function(){
        $(".click").on("click", function(){
            $(".popup").toggleClass("anim")
        })
});

Answer 1

在声明transform : scale(1.5);您要覆盖时transform: translate(-50%, -50%);，transform: scale(1.5)相当于transform: translate(0, 0) scale(1.5).

相反，您需要堆叠转换值以保持转换。关键帧动画变为：

  @keyframes popAnim{
    0%{
      transform : translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
    100%{
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }