CSS animation to make div appear smoothly from bottom-CodePudding

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 >
This is magic!
</div>

CodePudding user response：

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: absolute;
  bottom: -100%;
  opacity:0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  animation: smooth-appear 1s ease forwards;
}

<div >
  This is magic!
</div>

CodePudding user response：

As you can see in the code snippet you need to create an animation using the keyframes query and put the changing properties (the position in this case) into it.

Next use the animation property on the animated element.

body {
  background: red;
}

@keyframes animation {
  from {
    bottom: -60px
  }
  to {
    bottom: 20px)
  }
}

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

<div >
  This is magic!
</div>