How can i have CSS3 animating menu like followbubble.com

Question

For some practices I try to create a menu like followbubble.com with CSS3. it look a little like that. but not exact. I think they use AngularJS lib for creating all of the animations. but i don't know any thing about that library.

My HTML Markup:

<div id="sidebar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class="m-active">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

My CSS code:

@-webkit-keyframes openmenu {

  100% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

@keyframes openmenu {

  100% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

.openmenu {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: openmenu;
          animation-name: openmenu;

  -webkit-animation-duration: .6s !important;
          animation-duration: .6s !important;
    -webkit-transform-origin:0% 50%;
    -moz-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    -o-transform-origin:0% 50%;
    transform-origin:0% 50%;
    -webkit-transform:translate3d(120%, 0, 0) rotateY(90deg);   
    -moz-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -ms-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -o-transform:translate3d(120%, 0, 0) rotateY(90deg);
    transform:translate3d(120%, 0, 0) rotateY(90deg);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d
}

@-webkit-keyframes closemenu {

  0% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

@keyframes closemenu {

  0% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

.closemenu {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: closemenu;
          animation-name: closemenu;

  -webkit-animation-duration: .6s !important;
          animation-duration: .6s !important;
    -webkit-transform-origin:0% 50%;
    -moz-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    -o-transform-origin:0% 50%;
    transform-origin:0% 50%;
    -webkit-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -moz-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -ms-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -o-transform:translate3d(120%, 0, 0) rotateY(90deg);
    transform:translate3d(120%, 0, 0) rotateY(90deg);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d
}

and with the following jquery code, i call the css for animating and showing:

   $('#show-menu').click(function(){


            if( $('#sidebar').hasClass('animated openmenu') ) {

                $('#sidebar').removeClass('animated openmenu').addClass('animated closemenu');
            }
            else{
                if( $('#sidebar').hasClass('animated closemenu') ){                        
                    $('#sidebar').removeClass('animated closemenu');
                    }

                $('#sidebar').show().addClass('animated openmenu');
            }
        });

I want to have a menu animation exactly like followbubble.com. How can i create menu and animations like that without AngularJS lib? Excuse me for my bad English.

Answer 1

Here is an example using CSS's perspective and transition without any @keyframes .

Demo on codepen

 var c = 0; $('#hamburger').click(function() { if (c % 2 == 0) { $('#menu').css({ 'transform': 'rotateY(0deg)' }); $('#main-container').css({'left': '-250px'}); } else { $('#menu').css({ 'transform': 'rotateY(35deg)' }); $('#main-container').css({'left': '0px'}); } c++; }) 

 html, body { margin: 0; overflow: hidden; height: 102%; background: #222222; } #main-container { position: relative; width: 100%; height: 100%; left: 0; background: #222222; perspective: 510px; transition: all 1.2s; } #hamburger { font-size: 30px; color: #dddddd; float: right; padding: 30px; cursor: pointer; } #menu { margin: 0; height: 100%; width: 250px; background: #E2E2E2; list-style: none; padding: 0; transform: rotateY(35deg); position: absolute; right: -250px; transition: all 1s; transform-origin: 0 0; } li { width: 250px; height: 30px; line-height: 30px; padding: 10px 0 10px 0; text-align: center; color: #333333; border-bottom: 1px solid #666666; cursor: pointer; } #content { position: relative; color: #EEEEEE; transform: translateY(-50%); top: 50%; text-align: center; font-size: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main-container"> <div id="hamburger">☰</div> <ul id="menu"> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> <div id="content">Content</div> </div>