css - react 模态动画模态关键帧

我在我的React应用程序中为模型使用react modal。我想为它们添加一些动画。我在用。 css3关键帧为我的模态制作动画。

@keyframes modalSlide {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

这提供了很好的滑动效果以及动画持续时间，但它从顶部向下滑动。如何更改，使其从底部向上滑动？

最佳答案

为关键帧from中的translateY尝试正值：

@keyframes modalSlide {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }

}

关于css - react 模态动画模态关键帧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50603677/