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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.