CSS3 Transitions - Adding 2 different transitions to the same element

Question

I am having issues with my CSS3 transitions:

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;
 }

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)?

Answer 1

You can specify 2 or more comma-separated transitions, using a single transition property:

JSFiddle Demo

div.one_fifth {
    border: 1px solid #48484A;
    font-size: 18px;
    -webkit-transition : border 400ms ease-out, font 300ms ease-out; 
       -moz-transition : border 400ms ease-out, font 300ms ease-out;
         -o-transition : border 400ms ease-out, font 300ms ease-out; 
            transition : border 400ms ease-out, font 300ms ease-out; 
}
div.one_fifth:hover {
    border: 1px solid #ed2124;
    font-size: 20px;
}