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

如果问题不在这里，其余代码都在我上面发布的代码集中（http://codepen.io/anon/pen/yaZopZ）。

Answer 1

它是因为您正在将模态的转换属性从translate更改为scale，您应该将它们一起使用： {{ 3}}

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

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

1 个答案: