title: Animating CSS by transitions when a class is added to an element
body: <p>I'm using the Foundation framework on a project &amp; it's <a href="http://foundation.zurb.com/docs/components/top-bar.html" rel="nofollow">Top Bar</a> feature for navigation allows for drop-down navigation to appear on hover.</p>
  
  <p>During the <em>hover</em> event it adds a <code>.hover</code> class to the relevant element, therefore the changes in CSS pop into sight rather than animating by way of a smooth transition.</p>
  
  <p>This got me thinking. <strong>Is it possible to animate (via transitions or similar) the changes in CSS definitions?</strong></p>
  
  <p>Take this example. Here is our default element:</p>
  
  <pre><code>&lt;div class="a-box"&gt;Some content&lt;/div&gt;
  </code></pre>
  
  <p>And it's default CSS:</p>
  
  <pre><code>.a-box {
      width: 200px;
      height: 200px;
      background: red;
  }
  </code></pre>
  
  <p>On hover the framework (which I do not wish to edit the core file to keep it clean for updates) adds the <code>hover</code> class. Making our element now look like this:</p>
  
  <pre><code>&lt;div class="a-box hover"&gt;Some content&lt;/div&gt;
  </code></pre>
  
  <p>Here could be some CSS for the hovered element:</p>
  
  <pre><code>.a-box.hover {
      width: 400px;
  
      // I thought perhaps adding the following would work but it doesn't appear to
  
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      transition: all 200ms ease;
  }
  </code></pre>
  
  <p>I'd be keen to hear others POV on this! I'm not sure if this is a duplicate, but all the posts I've read relate to some form of jQuery animation.</p>