CSS动画使div从底部平滑显示

Question

我想让一个div看起来顺利，如下面的 GIF 所示。我认为这可以使用 CSS 动画来完成，但我以前从未研究过 CSS 动画。

如何使用CSS动画来实现呢？

body {
background:red;
}

.container  {
background:white;
padding:20px;
position: absolute;
bottom:20px;
left:45%;
border-radius:10px;
}

<div class="container">
This is magic!
</div>

Answer 1

是的，这个动画可以用 CSS 来完成，@keyframes例如使用如下所示。要关闭它，请在其中添加一个按钮，以及一个带有 JavaScript 的事件侦听器。

@keyframes smooth-appear {
  to{
    bottom: 20px;
    opacity:1;
  }
}
.container {
  background: gray;
  color:white;
  padding: 20px;
  position: fixed;
  bottom: -100%;
  opacity:0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  animation: smooth-appear 1s ease forwards;
}

<div class="container">
  This is magic!
</div>