How to create div that automatically slides in and out with CSS3 - css

Question

I want to create a div which automatic slides in when calling the webpage and the ability to close it with a X and if not press X automatic closes after 5 sec.
So lets say: from top of webpage slide in and div is 200px width and is 200px height.
How can I create that with css3 transitions?

Answer 1

Follow below code for your slider div using css3:
First add below CSS in your html:
<style>
.slider {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 30px;
-moz-animation-name: dropSlider;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
-webkit-animation-name: dopSlider;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
animation-name: dropSlider;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#-moz-keyframes dropSlider {
0% {
-moz-transform: translateY(-250px);
}
100$ {
-mox-transform: translateY(0);
}
}
#-webkit-keyframes dropSlider {
0% {
-webkit-transform: translateY(-250px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropSlider {
0% {
transform: translateY(-250px);
}
100% {
transform: translateY(0);
}
}
#divSlider.close {
opacity:0;
}
button {
position: absolute;
top: 0px;
right: 0px;
}
</style>
Now, add the below code in your body part:
<div align='center'>
<div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
<button type='button' onclick='closeMe();'>X</button>
<h1>Slider Div</h1>
</div>
</div>
then finally add the below script after the end of the body:
<script>
setTimeout(function() {
document.getElementById('divSlider').className = 'close';
}, 5000);
function closeMe() {
document.getElementById('divSlider').className = 'close';
}
</script>
Finally, your html is ready to execute....
I'm sure this'll help you solve out your issue and if it's does then don't forget to mark my answer... (^_^)
Thanks...
setTimeout(function() {
document.getElementById('divSlider').className = 'close';
}, 5000);
function closeMe() {
document.getElementById('divSlider').className = 'close';
}
.slider {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 30px;
-moz-animation-name: dropSlider;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
-webkit-animation-name: dopSlider;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
animation-name: dropSlider;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#-moz-keyframes dropSlider {
0% {
-moz-transform: translateY(-250px);
}
100$ {
-mox-transform: translateY(0);
}
}
#-webkit-keyframes dropSlider {
0% {
-webkit-transform: translateY(-250px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropSlider {
0% {
transform: translateY(-250px);
}
100% {
transform: translateY(0);
}
}
#divSlider.close {
opacity: 0;
}
button {
position: absolute;
top: 0px;
right: 0px;
}
<div align='center'>
<div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
<button type='button' onclick='closeMe();'>X</button>
<h1>Slider Div</h1>
</div>
</div>