title: CSS vertical side menu animation
body: <p><br>I am trying to animate my side nav bar similar to <a href="http://demodern.com/" rel="nofollow">this website side menu</a>. </p>
  
  <p>I have little bit trouble with my code on which I am working. Kindly tell me if I am doing it the correct way to animate my side navbar, similar to the website which link I mentioned. If it's not like that then guide me on how I can achieve this animation effect. </p>
  
  <p>CSS, jQuery one of them or both of them can use. <br>My code <a href="http://jsfiddle.net/arifhussain/6531foo4/" rel="nofollow">here</a>. Stack Snippet below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.shap {
      height: 100vh;
      width: 50%;
      position: fixed;
      right: 0;
      background: red;
      -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
      clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
      /*-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 68% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 68% 100%);*/
  }
  .side {
      -webkit-animation: width .5s;
      animation: width .5s;
  }
  @-webkit-keyframes width {
      0% {
          -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
      }
      50% {
          -webkit-clip-path: polygon(99% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(99% 0, 100% 0, 100% 100%, 60% 100%);
      }
      55% {
          -webkit-clip-path: polygon(90% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(90% 0, 100% 0, 100% 100%, 60% 100%);
      }
      60% {
          -webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(80% 0, 100% 0, 100% 100%, 60% 100%);
      }
      75% {
          -webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(70% 0, 100% 0, 100% 100%, 60% 100%);
      }
      85% {
          -webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%);
      }
      90% {
          -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(50% 0, 100% 0, 100% 100%, 60% 100%);
      }
      100% {
          -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shap side side1"&gt;
      &lt;ul class="nav-ul"&gt;
          &lt;li class="nav-li"&gt;Nav one&lt;/li&gt;
          &lt;li class="nav-li"&gt;Nav one one&lt;/li&gt;
          &lt;li class="nav-li"&gt;Nav one&lt;/li&gt;
          &lt;li class="nav-li"&gt;Nav one one&lt;/li&gt;
          &lt;li class="nav-li"&gt;Nav one&lt;/li&gt;
          &lt;li class="nav-li"&gt;Nav one&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>