title: CSS, JQuery: Animated transform from 3 lines menu to cross
body: <p><img src="https://i.stack.imgur.com/UDP2X.jpg" alt="enter image description here"></p>
  
  <p>I am wondering how to create <strong>an animation</strong> that would transform a 3 lined menu into a cross. The structure of the following buttons is sketched on the picture above. The 3 lines are created using 3 spans and the cross is created using before and after elements and rotate transition. Now I only use jquery to toggle class that changes the look of the button, but I would like to achieve some nice, animated effect such as </p>
  
  <ol>
  <li>one line of the 3-lined menu dissapears</li>
  <li>the rest 2 lines rotates and creates the cross</li>
  </ol>
  
  <p>and of course, inverse process when going from cross to 3-lined menu. </p>
  
  <p>How to achieve that?</p>
  
  <p><strong>Here's the fiddle</strong>
  <a href="http://jsfiddle.net/eaNEE/65/" rel="nofollow noreferrer">http://jsfiddle.net/eaNEE/65/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div id="menu-toggle-btn"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>SASS: </p>
  
  <pre><code>  #menu-toggle-btn {
      margin: 15px 10px;
      width: 30px;
      cursor: pointer;
      left: 15px;
      z-index: 10;
  
      &amp;.js-transform {
          span {
              display: none !important;
          }
  
          &amp;:before, &amp;:after {
              content: "";
              width: 4px;
              height: 25px;
              display: block;
              background: #1d1d1b;
          }
  
          &amp;:before {
            -ms-transform: rotate(45deg); /* IE 9 */
      -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
      transform: rotate(45deg);
          }
          &amp;:after {
                        -ms-transform: rotate(-45deg); /* IE 9 */
      -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
      transform: rotate(-45deg);
              margin-top: -25px;
          }
  
      }
  
      span {
          display: block;
          background: #1d1d1b;
          height: 4px;
          width: 30px;
          margin: 5px;
      }
  }
  </code></pre>