If you've ever worked with Flash, you'll have an instant advantage when working with CSS3 animations. CSS3 employs animation keyframing conventions found in Flash and other timeline based applications.

Animations are also more widely implemented than 3D transforms. They are supported in Firefox 5+, Chrome, Safari 4+, Android (all versions), iOS (all versions), and due to be incorporated into Internet Explorer 10.

There are two components to a CSS3 animation; firstly a keyframes declaration and then using that keyframe declaration in an animation property. Let's take a look.

In the previous section we made a simple flip effect for films that I consider HOT or NOT. Well, the text on the reveal is pretty dull, so let's add a nice pulsing effect to the answer that's revealed after the poster flips.

Firstly the keyframe rule:

@keyframes warning {
  0% {
    text-shadow: 0px 0px 4px #000000;
  }
  50% {
    text-shadow: 0 0 20px #000000;
  }
  100% {
    text-shadow: 0px 0px 4px #000000;
  }
}

I'm using the non-prefixed version of the code here so if things aren't happening you'll probably need to add a full vendor-prefixed stack (@-webkit-keyframes for example).

Let's break this down:

@keyframes warning {
  0% {
    text-shadow: 0px 0px 4px #000000;
  }
  50% {
    text-shadow: 0 0 20px #000000;
  }
  100% {
    text-shadow: 0px 0px 4px #000000;
  }
}

First, we are specifying a @keyframes declaration . We are then giving this particular keyframes declaration a name—warning in this instance. You can name them however you like but as these keyframe declarations can be re-used on multiple elements, name them accordingly.

You can set as many percentage points as you like (for example, 10, 20, 30, 40, and so on) or if you'd rather, define the animation with from and to values. Be warned however that Webkit browsers don't always play happily with from and to values (preferring 0% and 100%):

@keyframes warning {
  from {
    text-shadow: 0px 0px 4px #000000;
  }
  50% {
    text-shadow: 0 0 40px #000000;
  }
  to {
    text-shadow: 0 0 4px #000000;
  }
}

In this instance I'm altering a text-shadow, starting and ending with the same distance of 4px but going to 40px blur at 50%.

Now we have declared the keyframe, we can reference it with the animation property:

.back h5 {
    font-size: 4em;
    color: #f2050b;
    text-align: center;
    animation: warning 1.5s infinite ease-in;
}

After specifying the animation property, we define the particular keyframe rule we want to use (warning in this case), we then specify the animation-iteration-count (we've used infinite here so the animation continues continuously) and finally the timing function (ease-in). A static image obviously fails to do this justice but hopefully you can imagine the text shadow pulsing back and forth. View this in the browser at http://www.andthewinnerisnt.com.

The shorthand property can accept all seven animation properties. In addition to those used in the above example, it's also possible to specify animation-delay (for example, if you wanted to delay when the animation starts), animation-play-state (can be set to running or paused to effectively play and pause an animation) and finally animation-fill-mode , which I confess, I've yet to find a need to use (the default is none). Of course you don't need to use the shorthand property; you can list them individually as follows:

animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 0s;
animation-fill-mode: none;

As mentioned previously, it's simple to reuse the animation on other elements. For example:

nav ul li a:hover {
    animation: warning 1.5s infinite ease-in;
}

This gives our navigation links the same pulsing effect. You can (hopefully) see the STILLS/PHOTOS link in the screenshot below in the midst of the animation. Try it out for yourself at http://www.andthewinnerisnt.com.

This is just one very simple example of using CSS animations. As virtually anything can be key-framed, the possibilities are pretty endless. There are countless showcases of CSS3 animation techniques around the web. Pages like http://webdesignerwall.com/trends/47-amazing-css3-animation-demos should give you more than enough inspiration to be getting on with.

Putting CSS3 transformations and animations together

Let's try one more thing to flex our CSS3 muscles. I'd like to try placing all the aside sidebar images at varying angles and then animating them. The aim is to have them 'shake' when the page is first visited. Here's the markup for the sidebar:

<aside>
  <div role="complementary">
    <div class="sideBlock unSung">
      <h1>Unsung heroes...</h1>
      <a href="#"><img src="img/midnightRun.jpg"alt="Midnight Run" /></a>
      <a href="#"><img src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
    </div>
  </div>
  <div role="complementary">
    <div class="sideBlock overHyped">
      <h1>Overhyped nonsense...</h1>
      <a href="#"><img src="img/moulinRouge.jpg"alt="Moulin Rouge" /></a>
      <a href="#"><img src="img/kingKong.jpg"alt="King Kong" /></a>
    </div>
  </div>
</aside>

Now let's create the CSS3 to make this work. First, let's create a new keyframe declaration called swing:

@-webkit-keyframes swing {
  from {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(7deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(7deg);
  }
  to {
    transform: rotate(3deg);
  }
}

The animation will use the 2D rotate transform to move the item from 3 degrees to 10 and back again. And here's how the animation property is added:

#quiz .unSung a:nth-child(odd) img {
    transform: rotate(3deg);
    animation: swing 0.1s 5 ease-in;
}
#quiz .unSung a:nth-child(even) img {
    transform: rotate(-3deg);
    animation: swing 0.1s 5 0.3s ease-in;
}
#quiz .overHyped a:nth-child(odd) img {
    transform: rotate(3deg);
    animation: swing 0.1s 5 0.2s ease-in;
}
#quiz .overHyped a:nth-child(even) img {
    transform: rotate(-3deg);
    animation: swing 0.1s 5 0.5s ease-in;
}

Let's break this down. Firstly by relying on CSS specificity we can target these rules only at the QUIZ page (which has a <body id="quiz"> tag).

Before adding the animation property, I want to set a default rotate transform so that they remain off-kilter when the animation completes. I don't want them all at the same angle—so let's use the nth-child selector we learned about in Chapter 5, CSS3: Selectors, Typography, and Color Modes to select the odd and even images and apply different rotation transforms to them:

 #quiz .unSung a:nth-child(odd) img {
    transform: rotate(3deg);
    animation: swing 0.1s 5 ease-in;
}
#quiz .unSung a:nth-child(even) img {
    transform: rotate(-3deg);
    animation: swing 0.1s 5 0.3s ease-in;
}
#quiz .overHyped a:nth-child(odd) img {
    transform: rotate(3deg);
    animation: swing 0.1s 5 0.2s ease-in;
}
#quiz .overHyped a:nth-child(even) img {
    transform: rotate(-3deg);
    animation: swing 0.1s 5 0.5s ease-in;
}

Then the animation property is added for each instance. You'll notice slight variations in each of the rules. The shorthand property also takes into account that the second time value given (0.5s) is assigned to the animation delay. By utilizing this value we can effectively fire off each different instance separately.

#quiz .overHyped a:nth-child(even) img {
    transform: rotate(-3deg);
    animation: swing 0.1s 5 0.5s ease-in;
}

Again, when writing about animations, it's a little difficult to convey the effect. If you're not near an Internet connection, the best I can tell you is that the films rapidly shake from side to side and then settle off-kilter as shown in the following image: