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 {

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 issetto'font-size 12s' */transition: color 12s;     /* transition issetto'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);
  }
}

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

Solution 4:

JS Fiddle Demo

An alternative would be that you can also use a framework such as jQuery Transit to do this easily 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;

}