Blogs

CSS3 Animation Property Basics

Craig Buckler
Share

In the second part of this series about CSS3 animations we’ll take a detailed look at defining keyframes and element properties.

Defining Keyframes

In the previous lesson we discussed keyframes; a point within the animation where a known state is specified. Let’s create a simple set of keyframes where the background-color changes from blue to red to green to purple and back to blue again. First we need to define a @keyframes rule somewhere in our stylesheet (it doesn’t matter where):

@keyframes colorchange
{
	/* individual keyframes go here */
}

I’ve given the set a name of ‘colorchange’. You can use any name; keep it descriptive so you can identify it easily.

Next, we define individual keyframes at percentage points throughout the duration of our animation:

@keyframes colorchange
{
	0%   { background-color: #00F; /* from: blue */ }
	25%  { background-color: #F00; /* red        */ }
	50%  { background-color: #0F0; /* green      */ }
	75%  { background-color: #F0F; /* purple     */ }
	100% { background-color: #00F; /* to: blue   */ }
}

While we’ve only defined background-color, you can list any number of CSS properties (assuming it’s possible to animate them).

0% is the starting keyframe — you can also use the from keyword. 100% is the ending keyframe — you can also use the to keyword. Normally, you should code at least two keyframes although if your element’s default state was blue, you could miss the start and end, e.g.

@keyframes colorchange
{
	25%  { background-color: #F00; /* red        */ }
	50%  { background-color: #0F0; /* green      */ }
	75%  { background-color: #F0F; /* purple     */ }
}

So you can define at least 101 keyframes between 0% and 100%. Actually, you can define far more using percentage fractions such as 12.3% but, if your animations are that complex, you’re asking for trouble!

Finally, you (currently) need to repeat the whole block with a webkit prefix for Chrome, Safari and Opera 15+:

@-webkit-keyframes colorchange
{
	0%   { background-color: #00F; /* from: blue */ }
	25%  { background-color: #F00; /* red        */ }
	50%  { background-color: #0F0; /* green      */ }
	75%  { background-color: #F0F; /* purple     */ }
	100% { background-color: #00F; /* to: blue   */ }
}

This should normally be placed above the non-prefixed code.

Applying Animations to Elements

You can now apply your keyframes to any number of elements to see them in action. The following sections describe the standard properties but remember to include -webkit prefixed versions too.

animation-name

The animation-name property defines which set of named animation keyframes you want to apply, e.g. to use our ‘colorchange’ keyframes:

#myelement
{
	animation-name: colorchange;
}

animation-duration

Like transition-duration, animation-duration specifies an animation period in seconds (s) or milliseconds (ms) — that’s one-thousandth of a second. The following durations are identical:

#myelement p.one
{
	animation-duration: 3s;
}

#myelement p.two
{
	animation-duration: 3000ms;
}

animation-timing-function

Like transition-timing-function, the animation-timing-function determines how the animation varies in speed between keyframes — not throughout the whole of the animation (that said, it’s rarely noticeable unless you’re moving the element). There are a number of possible values:

  • ease — the default; the animation starts slowly then accelerates quickly. At the mid-point, it decelerates at the same rate and slows to a stop.
  • ease-in-out — similar to ease, but with subtler acceleration and deceleration.
  • ease-in — starts slowly, but accelerates and stops abruptly.
  • ease-out — starts quickly, but decelerates to a stop.
  • linear — constant speed throughout the animation; often best used for color or opacity changes.

Finally, there is cubic-bezier which allows you to define your own timing function. Refer to CSS3 Transitions: Bezier Timing Functions for an in-depth description.

animation-delay

Like transition-delay, animation-delay specifies the period in seconds (s) or milliseconds (ms) before an animation will start. The following are identical:

#myelement p.one
{
	animation-delay: 0.5s;
}

#myelement p.two
{
	animation-delay: 500ms;
}

animation-iteration-count

animation-iteration-count specifies the number of times the animation plays. The default is one, but you can set any positive integer value (a zero or negative integer will never play the animation). Alternatively, you can use the infinite keyword to play the animation forever.

#myelement p.one
{
	animation-iteration-count: 5;
}

#myelement p.two
{
	animation-iteration-count: infinite;
}

animation-direction

animation-direction determines how the animation should repeat. The following keywords can be used:

  • normal — the default; plays animation keyframes forward from 0% to 100%
  • reverse — plays animation keyframes backward from 100% to 0%
  • alternate — plays the animation forward, then reverse and repeats.
  • alternate-reverse — similar to alternate except the reverse animation is played first.

CSS Shorthand Notation

Let’s look at a full animation declaration:

#myelement
{
	animation-name: colorchange;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

That’s a lot of typing especially once you factor in the -webkit prefixed versions. Again, you can use a single animation shortcut to define all six values in the order shown above.

#myelement
{
	-webkit-animation: colorchange 5s linear 1s infinite alternate;
	animation: colorchange 5s linear 1s infinite alternate;
}

View the result…

That’s a start, but try adapting it for your own animations.