Can CSS3 Transition Font Size?

Clearing the Browser Hurdles

Life isn't always a straight path, the same applies to different browsers. Remember to prefix’em all:

.element {
  font-size: 14px;
  /* Keeping everyone happy */
  -webkit-transition: font-size 0.5s;
  -moz-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  transition: font-size 0.5s;
}


Watch your steps or you might stumble upon transition overwriting:

.element {
  /* The supervisor has arrived! Important first, rest later */
  transition: color 0.3s, font-size 0.5s; 
}

.element:hover {
  color: red;
  font-size: 20px; 
}


Cracking the Advanced Code

Taking one step further, you can use transform: scale() to jazz up text size. But why would I do that? Well, because it's different and fun:

.element { 
  /* One small step for a div, one giant leap for UI */
  transform: scale(1);
  transition: transform 0.5s;
}

.element:hover {
  /* Grow big or go home! */
  transform: scale(1.5);
}


Talking control? transform-origin won't leave you hanging.

Detailed Control with Keyframes

For the perfectionist in you, keyframes are a go-to option to define every aspect of your transition:

@keyframes font-grow {
  from { font-size: 14px; } /* I started from here */
  to { font-size: 20px; } /* And now I am here */
}

.element {
  animation: font-grow 0.5s forwards; /* To infinity and beyond */
}


Just like a schedule, lists every step of the journey.

Maintaining Code Health

Going for CSS transitions over JavaScript lends performance benefits. I know winning performance racer sounds alluring!

For happy code:

/* What we see is what we get */
.element { ... }
.element:hover { ... }


Separating your normal and hover styles is like having desserts after dinner.

Seamlessness is the Key

Smooth Operators: Easing Functions

Easing functions like ease-in-out make transitions as smooth as a lullaby:

.element {
  transition: font-size 0.3s ease-in-out;
}


It's basically a digital version of 'slow and steady wins the race'.

Size Scaling Without Quality Degrading

Preserve quality by scaling down not up:

.element-big {
  font-size: 20px; /* Born big */
}

.element-big:hover {
  font-size: 14px; /* Humble in victory */
}


It's like growing younger, but better.

Code Testing: The Ultimate Reality Check

Cross-browser testing: because diversity matters and because we love all browsers equally. Tools like JS Fiddle make it easier than eating a cake!