. This is my blog, where I talk about web design and development with 
Pro CSS3 Animation, Apress, 2013Previously I’ve discussed the concepts of keyframes and tweening that are central to animation. Now that this technology has arrived in modern browsers, it’s time to discuss how to make use of keyframe animations on the web with CSS3.
CSS3 Keyframes vs Transitions
The term “CSS3 Animation” can be confusing: does it mean CSS3 transitions, keyframes, or both? While transitions and keyframes share a similar syntax and goals, they are distinct techniques:
CSS transitions are simple animations with only two possible points: a start frame and an end frame.
Control of a transition is limited to defining those start and end point, and the time and easing curve between them.
Transitions are “one-shot” events, usually triggered by a user action (a mouseover, for example). CSS3 keyframe animations do not need a triggering event, and can loop or cycle.
Using Keyframes vs Transitions
CSS keyframe syntax is a little complex, so it should be used only when needed. If the animation is simply between one point and another, with no intermediate steps, and does not loop, use a transition. If the animation is between a series of states – a ball bouncing across the screen, for example – use CSS3 keyframes. On the other hand, truly complex animations are probably best left to a specialized animation tool, exported as a Flash or movie file, rather than trying to code it in CSS3. This will change as tools gain the ability to export HTML5 / JavaScript / CSS3 code directly, such as Flash CC6 and Animatable.
For our purposes, the term “CSS3 animation” covers both keyframes and transitions.
CSS3 Keyframe Syntax
In a sense, creating a keyframe animation is very similar to defining a CSS3 embedded font with @font-face: we define the animation and then reference that definition later our stylesheet.
First, let’s start by creating a simple HTML element to animate. This could be absolutely anything: an image, a paragraph, any piece of web content at all. I’m going to take a simple div and style it into a circle with border-radius:
div#redball { width: 150px; height: 150px; border: 2px solid #000; background: red; border-radius: 50%; position: absolute; }Which modifies the appearance of the matching element in our <body>:
<div id=redball></div>The easiest way to think of CSS3 keyframes is not as frames per se, but as points along a timeline of arbitrary length. The start of the animation will be 0%; halfway through, 50%, and completed, 100%. So a simple two-keyframe animation to make our #redball element move could look like this:
@keyframes bounce { 0% { top: 300px; } 100% { top: 0; }}(Note the inner curly braces).
This should go at the start of our stylesheet, just as we do with @font-face. Note that the name used for the animation sequence (“bounce” in our case) is arbitrary: you can pretty much call the animation whatever you like, so long as the name follows web naming conventions, and you refer to the same name later when you call the sequence.
Let’s do that now: gobackto our #redball CSS definition and add a call to the animation, together with some other information:
div#redball { width: 150px; height: 150px; border: 2px solid #000; background: red; border-radius: 50%; position: absolute; animation: bounce 2s infinite alternate; }The duration part (2s, for two seconds) is the same as that used in CSS3 transition animations; infinite means that the animation will play forever, and alternate means that the animation will “ping-pong” back and forth. I’ll get into more properties, together with some practical examples, in upcoming articles.
