94

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;
 }
Charlie
  • 8,530
  • 2
  • 55
  • 53
Squirrl
  • 4,909
  • 9
  • 47
  • 85

4 Answers4

122

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 8
    +one for using the word 'dagnabbit' in response to op's 'what in tarnation' question :P #LanguageStyleMatching – Bart Dec 22 '14 at 13:45
  • 4
    That was OPs phasing, someone edited it out of his question for whatever reason. – thirtydot Dec 24 '14 at 19:00
  • 1
    I would argue not to use the `all` keyword for transition for performance reasons. It can make your page horrendously slow. Opt in for the more verbose syntax: `transition: color 12s, font-size 12s;` – mcguiretj Jul 01 '18 at 20:26
  • is there a way to do the same effect but with the *background-color* and *background-clip* properties? I'm trying to do this :) and would appreciate if there's already a solution for this. – Leonardo Maffei Sep 02 '18 at 12:32
  • @LeonardoMaffei: I recommend asking a new question if you can't find an answer. Be sure to include your code, a demo, and a good explanation of what you're trying to do. – thirtydot Sep 02 '18 at 16:06
75

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.

Artur Keyan
  • 7,643
  • 12
  • 52
  • 65
  • 7
    wrong answer, it works, but font-size isn't a "subproperty" of font. font property doesn't exists, it's a shorthand property – Kustolovic Sep 18 '15 at 08:42
31

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>
Charlie
  • 8,530
  • 2
  • 55
  • 53
  • This is a really good tip! Was facing jerky animations on font-size on mobile, particularly Android, while it was all fine on desktop. Relying on `transform: scale()` in place of `font-size` fixed it. It's now smooth on all platforms. – Fabien Snauwaert Feb 21 '20 at 12:54
0

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;

}
Gaff
  • 5,507
  • 3
  • 38
  • 49