Can CSS3 transition font size?

Question

How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason.

Sample code:

body p {      font-size: 12px;      color: #0F9;      transition:font-size 12s;      -moz-transition:font-size 12s; /* Firefox 4 */      -webkit-transition:font-size 12s; /* Safari and Chrome */      -o-transition:font-size 12s;      transition:color 12s;      -moz-transition:color 12s; /* Firefox 4 */      -webkit-transition:color 12s; /* Safari and Chrome */      -o-transition:color 12s; }   p:hover {       font-size: 40px;       color:#FC0;  } 

Answer 1

The color transitions fine over time, but the font switches immediately for some dagnabbit reason.

Your font-size transition is being overwritten by your color transition.

transition: font-size 12s; /* transition is set to 'font-size 12s' */ transition: color 12s;     /* transition is set to 'color 12s' !! */ 

Instead, you must combine them all into one declaration:

transition: color 12s, font-size 12s; 

See: http://jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;    -moz-transition: color 12s, font-size 12s;      -o-transition: color 12s, font-size 12s;         transition: color 12s, font-size 12s; 

(Or, just use the all keyword: transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/).

Answer 2

Try set transition for all properties:

-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; 

it is works as well.

OR just font: transition: font 0.3s ease.