为什么我的模式不是从屏幕中心开始动画？

Question

目标：我希望我的 .modal class div 从屏幕死点开始从 0 缩放到 1。目前，它起源于屏幕的右下角，并在弹出到最终位置之前缓慢前进到中心。我已经尝试查看 MDN 上的关键帧、变换原点、固定位置和其他我认为可能导致该行为的内容的文档，但我迷路了。任何帮助将不胜感激，特别是如果你能解释为什么会发生这种情况，因为我想了解我做错了什么。

CodePen Link: https://codepen.io/AlfredGarcia/pen/zYPNWgM?editors=1100

HTML:

<div class="modal">
  <header class="modal__header">
    <h3 class="modal__title">Attention</d>
  </header>
  <div class="modal__content">
    <p class="modal__message">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit quibusdam debitis est voluptatem recusandae aliquid neque rerum, eum cum distinctio illum excepturi veniam illo suscipit, assumenda hic placeat minima? Ipsum.</p>
  </div>
  <div class="modal__actions">
    <button class="btn btn--positive" type="button">Confirm</button>
    <button class="btn btn--negative" type="button">Decline</button>
  </div>
</div>

CSS

.modal {
  border-radius: 0.625em;
  box-shadow: 0 2px 10px -4px black;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  animation: 5s ease-in fadein;
}

.modal__header {
  background-color: lightgray;
  border-top-left-radius: 0.625em;
  border-top-right-radius: 0.625em;
  padding: 0.75em 0 0.75em 1em;
}

.modal__title {
  font: 1.25rem/1.1 poppins, sans-serif;
  margin: 0;
}

.modal__content {
  padding: 1em;
}

.modal__message {
  font: 1rem/1.4 calibri, sans-serif;
  margin: 0;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 1em 1em 1em;
}

.btn {
  padding: 0.625em 1.25em;
  display: block;
  border: none;
  border-radius: 0.625em;
  box-shadow: 0 2px 10px -4px black;
  text-transform: uppercase;
}

.btn:active {
  transform: translateY(3px);
}

.btn + .btn {
  margin-left: 1em;
}

.btn--positive {
  background-color: lightgreen;
}

.btn--positive:hover {
  filter: brightness(110%);
}

.btn--negative {
  background-color: #ff3131;
  filter: brightness(90%);
  color: white;
}

.btn--negative:hover {
  filter: brightness(100%);
}

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

Answer 1

您的模态没有按照您想要的方式设置动画，因为 class .modal 中的 transform 被 fadein 关键帧中的 transform 覆盖，随后删除您的 transform: translate(-50%, -50%); - 这就是导致“跳跃”的原因。

更新您的关键帧以包含您想要的位置并添加一个transform-origin，例如：

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

工作代码笔：https://codepen.io/scarabaeus/pen/QWOgLrZ/d8a3c1fa93d5dd198e1d681f0b29de32?editors=1100

为什么我的模式不是从屏幕中心开始动画？

Why is my modal not animating from the center of the screen?

css

animation

transform

scale