O'Reilly logo

Creating Web Animations by Kirupa Chinnathambi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required