Make text grow on page load with CSS keyframes

Using CSS keyframe animations on page load can add something extra to your design. Whether it be animating a border, a background change or section grow, using keyframes to change elements with just CSS can be a nice touch.

Here is how to grow text on page load, i am using a h1 element but you can use any typography element.

You can see in the CSS below the animation takes 3 seconds to make the font size 0 to 4rem. There are only 2 keyframes… 0% (the start) and 100% (end).

CSS:

.header-grow {
  animation: growth 3s;
  animation-fill-mode: backwards;
  font-size: 4rem;
}

@keyframes growth {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 4rem;
  }
}

The h1 element:

<h1 class="header-grow">Some heading text</h1>

Gives this result