如何为垂直居中的div设置动画，使其水平滑动到中心

Question

我有一个模态，该模态垂直居中，滑入后也应该水平居中，换句话说，它应该从已经垂直居中的位置水平滑入中心，但是只能水平滑入。

这是我尝试过的方法，但表现不符合预期：

.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>

Answer 1

两件事：

1）您发布的SCSS缺少右括号。

2）您的INDEX()属性正在相互覆盖。要进行多个转换，必须在同一属性中顺序列出它们。因此，由于该元素已经具有Y变换，因此您需要将其包括在动画中以进行X变换：

transform

正在运行的演示here。

Answer 2

此清除问题transform: translateX(-50%);

修改后的代码将是：

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