I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Basics of CSS Keyframe Animation

css / animation

Estimated reading time: 2 minutes, 56 seconds

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.