Animate top property on relative positioned div - HTML CSS CSS

HTML CSS examples for CSS:Animation

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

Description

Animate top property on relative positioned div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
footer {<!--from  w  w  w .  ja  v  a2  s  . c  om-->
   background-color:Chartreuse;
   text-align:center;
   color:yellow;
}

footer .f-first {
   top:0vh;
}

footer:hover .f-first {
   top:6vh;
}

footer div {
   position:relative;
   transition:all 0.6s cubic-bezier(0.76, 0, 0.26, 2) 0.2s;
}
</style> 
 </head> 
 <body translate="no"> 
  <footer class="docu-footer"> 
   <div> 
    <div class="f-first">
      line1 
    </div> 
    <div class="f-third">
      line2 
    </div> 
    <div class="f-second">
      line3 
    </div> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials