Click to fly in left bar with animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Fly

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

Description

Click to fly in left bar with animation

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">

html, body {
   margin: 0;
   width: 100%;
   height: 100%;
}
#main-slide {<!--from   w  w  w .  ja  va  2  s  .  co m-->
   width: 100%;
   height: 100%;
   background-color: slategray;
}
a {
   padding-left: 20px;
   font-size: 5em;
   text-decoration: none;
   color: black;
}
#left-slide {
   display: flex;
   flex-direction: row;
   position: absolute;
   top: 0;
   left: -100%;
   height: 100%;
   width: 100%;
   transition: transform 400ms ease-in;
}
#left-slide .menu {
   width: 30%;
   background: gray;
}
#left-slide .back {
   width: 70%;
   background: transparent;
}
#left-slide:target {
   transform : translateX(100%);
}


      </style> 
 </head> 
 <body> 
  <div id="left-slide"> 
   <div class="menu"> 
    <ul> 
     <li>MENU</li> 
     <li>HOme</li> 
     <li>Items</li> 
     <li>About</li> 
    </ul> 
   </div> 
   <a href="#main-slide" class="back"></a> 
  </div> 
  <div id="main-slide"> 
   <a href="#left-slide">?</a> 
  </div>  
 </body>
</html>

Related Tutorials