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

The Goal: I would like my .modal class div to scale from 0 to 1 from the dead center of the screen. Currently, it originates on the bottom right of the screen and slowly progresses to the center before popping into the final location. I've tried reviewing the documentation on MDN for keyframes, transform-origin, position fixed, and other things I thought could cause the behavior and I'm lost. Any help would be appreciated especially if you can explain why this happens because I want to understand what I'm doing wrong.

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

HTML:

<div >
  <header >
    <h3 >Attention</d>
  </header>
  <div >
    <p >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 >
    <button  type="button">Confirm</button>
    <button  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);
  }
}

CodePudding user response：

Your modal is not animating as you want because the transform in your class .modal is being overridden by the transform in your fadein keyframes, subsequently removing your transform: translate(-50%, -50%); -- this is what's causing the "jump".

Update your keyframes to include your desired position and add a transform-origin, for example:

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

Working Codepen: https://codepen.io/scarabaeus/pen/QWOgLrZ/d8a3c1fa93d5dd198e1d681f0b29de32?editors=1100