CSS animation to make div appear smoothly from bottom

Issue

I want to make a div appear smoothly as shown in the GIF below. I assume this can be done using CSS animation but I have never worked on CSS animation before.

How to achieve it using CSS animation?

body {
background:red;
}

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

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

Solution

Yeah, this animation can be done with CSS, using @keyframes for example, like below. To close it, add a button in it, with an event listener with 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>

Answered By - yousoumar