为什么这个CSS动画(变换:缩放)从错误的位置开始？

Question

我有这个示例代码http://codepen.io/anon/pen/yaZopZ(下面的相关片段),当您单击按钮时,模态元素应该通过在屏幕中心打开并从它的全尺寸没什么.但是,它会在动画开头的右下方打开,然后在屏幕中央结束.我需要更改为该代码以使其按预期工作？

当您单击图像时,它应该与http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image中的动画类似.但与该示例不同,我的示例在您在后台单击并需要保留该功能时关闭模式.

这是动画的一部分

@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;
}

如果问题不在这里,其余的代码在我上面发布的codepen中(http://codepen.io/anon/pen/yaZopZ).

Answer 1

那是因为你改变的变换从模式的特性translate来scale,你应该做的是一起使用这两个:DEMO

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