Chapter 9. Simple Text Fade and Scale Animation

Not all animations have to be flashy and doing all sorts of things to grab your attention. Some of the best uses for animation are in the subtle cases—the cases where you may not even notice an animation is present. In this chapter, we’ll create one such animation whose existence is purely to add some sugary, frosty value. To see this animation, navigate your browser to

If you don’t have access to a browser where you can view it live, take a look at the following video:

This example is a very quick animation that fades some text in. Along with the fade, your text scales (or zooms) in as well. In this deconstruction, we’ll look at how this effect was created by primarily focusing on the CSS animation responsible for it.

The Example

The full HTML and CSS for this example looks as follows:

<!DOCTYPE html>
  <title>Example Of Many Things!</title>
    body {
      background-color: #F5F5F5;
      margin: 50px;
      margin: 25px 0 0 0;
    #main {
      text-align: center;
      background-color: #82C1FF;
      width: 600px;
      height: 300px;
      margin: 0 auto;
      border-radius: 5px;
    h1 {
      font-size: 88px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      color: #FFF;
      margin: 0;

Get Creating Web Animations now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.