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 http://bit.ly/subtle_animation.

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>
<html>
  
<head>
  <title>Example Of Many Things!</title>
  <style>
    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;
      padding:

Get Creating Web Animations now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial