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>
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;
overflow: hidden;
}
@keyframes animation {
from {
bottom: -60px
}
to {
bottom: 20px)
}
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
animation: 2s animation;
}
<div class="container">
This is magic!
</div>
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>
@VXp you are right, it does create a scroll bar. Your solution could work but then he should remove
Why would i use overflow hidden for body, there are no elements to overflow it. Regarding the centering i was only using the provided example I think the op can refer to the 11 ways to center a div article for that 🙂 Edit: nevermind you’re right about overflow but I got beat to an answer anyway
