Question

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

在下面的关键帧部分，当我遗漏transform: scale时，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>

jquery的：

$(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;
    }
  }

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

1 个答案: