Can CSS3 transition font size?

Question

How can I increase the font size on the mouse? Color transitions work fine over time, but the font size immediately switches for some reason.

Code example:

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

Color transitions are fine over time, but font switchers immediately for some reason dagnabbit.

Your font-size transition will be 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 should 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 keyword all : transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/ ).

Answer 2

Try setting the 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 works.

OR just a font: transition: font 0.3s ease .

Answer 3

The transitions for font-size seem step by step and therefore are not smooth.

If this is only one line, you can use transform: scale(.8) . Zoom out, not up, so as not to lose quality. You will probably also need to use transform-origin: 0 0 or another value depending on your text alignment.

Answer 4

JS Fiddle Demo

An alternative could be that you can also use a framework like jQuery Transit to make this easy for you:

JavaScript:

 $("p").hover( function () { //On hover in $("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000); }, function () { //On hover out $("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000); }); 

CSS

 p { font-size: 12px; color: #0F9; }