Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Working with key-frame animations in CSS

Friday, February 14th, 2014 by Servage


The CSS Animations module allows authors to create real, honest-togoodness keyframe animation. Unlike transitions that go from one state to another, keyframe animation allows you to explicitly specify other states at points along the way, allowing for more granular control of the action.

Those “points along the way” are established by keyframes that define the beginning or end of a segment of animation. CSS transitions are animations with two keyframes: a start state and an end state. More complex animations require many keyframes to control property changes in the sequence.

Establishing the keyframes

The animation process has two parts: first, establish the keyframes with a @keyframes rule, and then add animation properties to the elements that will be animated.

Here is a very simplistic set of keyframes that changes the background color of an element over time. It’s not a very action-packed animation, but it should give you a basic understanding of what a @keyframes rule does.

@keyframes colors {
0% { background-color: red; }
20% { background-color: orange; }
40% { background-color: yellow; }
60% { background-color: green; }
80% { background-color: blue; }
100% { background-color: purple; }

What that @keyframes rule says is this: create an animation sequence called “colors.” At the beginning of the animation, the background-color of the element should be red, at 20 percent through the animation runtime the background color should be orange, and so on, until it reaches the end of the animation. The browser fills in all the shades of color in between each keyframe (or tweens it, to use the lingo).

Each percentage value and the property/value declaration defines a keyframe in the animation sequence. In addition to percentages, you could also use the keywords from at the start of an animation sequence and to denote the end. Here’s what a @keyframes rule looks like abstracted down to its syntax.

@keyframes animation-name {
keyframe { property: value; }
keyframe { property: value; }
Adding animation properties

Now we can apply this animation sequence to an element or multiple elements in the document using a collection of animation properties that are very similar to the set of transition properties that you already know.

I am going to apply the rainbow animation to the #magic div in my document.

<div id=”magic”>Magic!</div>

In the CSS rule for #magic, I can make some decisions about the animation I want to apply:

• Which animation to use (animation-name)

• How long it should take (animation-duration)

• The manner in which it should accelerate (animation-timing-function)

• Whether to pause before it starts (animation-delay)

Looking familiar? There are a few other animation-specific properties as well.

• How many times it should repeat (animation-iteration-count).

• Whether it plays forward, in reverse, or alternates back and forth (animation-direction)

• Whether it should be running or paused. The play-state can be toggled on and off with JavaScript or on hover (animation-play-state).

• Whether to override defaults that prevent properties from applying outside runtime (animation-fill-mode).

The animation-name property tells the browser which keyframes sequence to apply to the #magic div. I’ve also set the duration and timing function, and used animation-iteration-count to make it repeat for infinity. I could have provided a specific number value, like 2 to play it twice, but how fun is only two rainbows? And for fun, I’ve set the animation-direction to alternate, which makes the animation play in reverse after it has played forward. The other options are simply forward or reverse.

Here is the resulting rule for the animated div.

#magic {

animation-name: colors;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;

That gets a bit verbose, especially when you consider that each one would need to be repeated with vendor prefixes for a published site. You can also use the animation shorthand property to combine the values, just as we did for transition.

#magic {
animation: colors 5s linear infinite alternate;

Resources for further reading

W3 Schools

Site Point

Working with key-frame animations in CSS, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.