0

I have a modal that is vertically centered and should also be horizontally centered after sliding in, in other words, it should slide-in horizontally to the center, but only horizontally, from an already vertically centered position.

This is what I tried but it does not behaves as expected:

.float-in {
  opacity: 0;
  animation: float-in 0.3s ease forwards;
}

@keyframes float-in {
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: table;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  background: #fff;
  min-width: 250px;
  max-width: 450px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  border-radius: 0.125rem;
  padding: 3rem 2.5rem 1.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
}
<div class="modal-container float-in"> </div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Code Worm
  • 313
  • 1
  • 4
  • 16

2 Answers2

1

Two things:

1) The SCSS you posted is missing a closing bracket.

2) Your transform properties are overwriting one another. To have multiple transforms you must list them sequentially within the same property. So because the element already has a Y transform, you need to include that in your animation for the X transform:

@keyframes float-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

Working demo here.

Chris B.
  • 5,477
  • 1
  • 12
  • 30
0

The problem with this declearation transform: translateX(-50%);

The revised code will be:

@keyframes float-in {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
  }
}
Mobarak Ali
  • 751
  • 5
  • 19