Part of the CSS Animations Reading List

Previously 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 CSS.

CSS Keyframes vs Transitions

The term “CSS Animation” can be confusing: does it mean CSS 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). CSS 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 keyframes. On the other hand, truly complex animations are probably best left to a specialized animation tool, rather than trying to code it in CSS.

For our purposes, the term “CSS animation” covers both keyframes and transitions.

CSS Keyframe Syntax

In a sense, creating a keyframe animation is very similar to defining an 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 CSS 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).

As a general rule 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: go back to 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 CSS 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.

Animation by Dan Allison, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.