Use animations to slide a fixed position element from the bottom of the page to the top - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Slide

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Slide

Description

Use animations to slide a fixed position element from the bottom of the page to the top

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#test{<!--   www  . j  a v a2 s  .  co m-->
   position: fixed;
   bottom: 0px;
   left: 0px;
   overflow: none;
   width: 100%;
   z-index: 1000;
   height: 44px;
   border-top: 1px solid #060606;
   border-bottom: 1px solid #060606;
   opacity: 0.95;
   background-image: -webkit-linear-gradient(rgb(60, 60, 60), rgb(20, 20, 20));
   box-shadow: inset 0 1px 0px rgb(95, 95, 95);
}
@-webkit-keyframes silde_to_top {
   0% {
      top: 100%;
   }
   100% {
      top: 0%;
      z-index: 1000000;
      opacity: 0.5;
   }
}
#test{
   -webkit-animation-name: silde_to_top;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: ease;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 0;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
}


      </style> 
 </head> 
 <body> 
  <div class="container">
    Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> Filler 
   <br> 
  </div> 
  <div id="test"> 
  </div>  
 </body>
</html>

Related Tutorials