CSS3 Animation Property Basics
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 toalternate
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;
}
That’s a start, but try adapting it for your own animations.