Javascript 为什么CSS动画（变换：缩放）从错误的位置开始？

我有这个示例代码（下面的相关代码片段），当您单击按钮时，模态元素应该通过在屏幕中央打开并从零增长到全尺寸来设置动画。但是，它在动画开始时在右下角打开，然后在屏幕中央结束。我需要对代码做什么更改才能使其按预期工作

当您单击图像时，它的行为应该与中的动画类似。但与该示例不同，我的示例在您在后台单击时关闭模式，并且需要保留该功能

这是动画的一部分

@keyframes animatezoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

这就是我们正在制作的动画

.modal {
  display: block;
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  animation: animatezoom 0.3s;
}

---

如果问题不在这里，那么其余的代码就在我上面发布的代码栏（）中。

这是因为您正在将模态的变换属性从

translate

更改为

scale

，您应该做的是同时使用它们：

@keyframes animatezoom {
  from {
    transform: translate(-50%, -50%) scale(0)
  }
  to {
    transform: translate(-50%, -50%) scale(1)
  }
}

---

这是因为您正在将模态的transform属性从

translate

更改为

scale

，您应该同时使用它们：

@keyframes animatezoom {
  from {
    transform: translate(-50%, -50%) scale(0)
  }
  to {
    transform: translate(-50%, -50%) scale(1)
  }
}

---

这正是正在发生的事情-使用此选项这正是正在发生的事情-使用此选项