title: CSS3 Transitions - Adding 2 different transitions to the same element
body: <p>I am having issues with my CSS3 transitions:</p>
  
  <pre><code>div.one_fifth{
     border: 1px solid #48484A;
     transition : border 400ms ease-out; 
     -webkit-transition : border 400ms ease-out; 
     -moz-transition : border 400ms ease-out;
     -o-transition : border 400ms ease-out; 
     font-size: 18px;
     transition : font 300ms ease-out; 
     -webkit-transition : font 300ms ease-out; 
     -moz-transition : font 300ms ease-out;
     -o-transition : font 300ms ease-out;
  }
  
   div.one_fifth:hover{
     border: 1px solid #ed2124;
     font-size: 20px;
   }
  </code></pre>
  
  <p>Now the problem is that when I define both the transitions, the border one does not work...So it seems like the two transitions interfere and the font one overrides the border one...How do I intergrate them, if so, how would you do it with different speeds(ms)?</p>