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>