CODEWITHSUNDEEP
csstransition
Jack Maessen
Jack Maessen

Reputation: 1864

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

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?

Upvotes: 0

Views: 141

Answers (1)

Mayur Siddhapura
Mayur Siddhapura

Reputation: 296

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>

Upvotes: 1

Related Questions