Can CSS3 transition font size?

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

Solution 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/).

Solution 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.

Solution 3:

Transitions for font-size seem to step by pixel and thus aren't smooth.

If it's just one line, you might be able to use transform: scale(.8). Scale down and not up so you don't lose quality. You will likely also need to use transform-origin: 0 0 or a different value depending on your text alignment.

#size ,#transform{
  height: 80px;
  position:absolute;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;
}

#size {
  animation-name: size;
}

@keyframes size {
  from {
    font-size:10px;
    left:155px;
    top:40px;
  }

  to {
    font-size:80px;
    top:0;
    left:30px;
  }
}

#transform {
  animation-name: transform;
  transform-origin: center middle;
  font-size:80px;
  top:80px;
}

@keyframes transform {
  from {
    transform:scale(.1);
  }
  to {
    transform:scale(1);
  }
}

<div id=size>Font-size</div>
<div id=transform>Transform</div>