title: Toggling CSS3 animation
body: <p>I am trying to make a toggle sidebar which animates.</p>
  
  <p>When I try to hide the sidebar with CSS3 Transition property by adding a hidebar class, it works perfectly. But It's a toggle, and when I show it again, there is no transition. The menu just snaps out.</p>
  
  <pre><code>#page-content.hidebar   {
  transition: margin 0.3s ease;
  margin-left: 0;
  }
  </code></pre>
  
  <p>Can anyone suggest how can I have the transition property when I toggle the sidebar to visibility as well?</p>
  
  <p>I am attaching a fiddle as an example.</p>
  
  <p><a href="http://jsfiddle.net/dxYCm/1/" rel="nofollow">http://jsfiddle.net/dxYCm/1/</a></p>