title: hamburger activate css transition on click
body: <p>The aim of my game - to get a hamburger icon to show transition to a cross on click, then when clicked again to revert back to its burger state.</p>
  
  <p>I'm not CSS guru but have managed, through extensive googling) to get it to do the transition on hover and when clicked (but instantly reverts).</p>
  
  <p>I am struggling to reach my goal, could someone please provide me with some pointers?</p>
  
  <p><strong>Update</strong></p>
  
  <p>As requested, here's a fiddle - <a href="https://jsfiddle.net/20nqa5jr/" rel="nofollow">here</a>
  Below is a section of the CSS that deals with the transition, I have tried using toggle from JQuery in order to trick the CSS into think that the mouse is still clicked down but couldn't get it to work, if this is possible (assume it is) is it an ill-advised method of achieving my aim?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.burge:active span {
      background-color: rgba(0,0,0,0.0);
      transition-delay: .2s;
  }
  .burger:active span:before {
      background-color:#7dcc3d;
      transition-property: margin, transform;
      transition-duration: .3s;
      transition-delay: .3s, 0;
  }
  .burger:active span:before {
      margin-top: 0;
      transform: rotate(45deg);
      transition-delay: 0, .3s;
  }
  .burger:active span:after {
      background-color:#7dcc3d;
      transition-property: margin, transform;
      transition-duration: .3s;
      transition-delay: .3s, 0;
  }
  .burger:active span:after {
      margin-top: 0;
      transform: rotate(-45deg);
      transition-delay: 0, .3s;
  }
  </code></pre>