Scribd
Upload
186 views

CSS Animation 101 Animations in Action

This document discusses CSS animations using the animation property and keyframes. It explains that keyframes define the stages of an animation using percentages, like 0% for the start, 50% for halfway, and 100% for the end. An example changes a div's background color from blue to orange to green. The animation property applies a named set of keyframes to an element. Additional animation properties control duration, timing, and repetition. Prefixes may be needed like -webkit- for some browsers. The homework suggests experimenting with changing the example animation.

Uploaded by

Kulin Ban
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
186 views

CSS Animation 101 Animations in Action

This document discusses CSS animations using the animation property and keyframes. It explains that keyframes define the stages of an animation using percentages, like 0% for the start, 50% for halfway, and 100% for the end. An example changes a div's background color from blue to orange to green. The animation property applies a named set of keyframes to an element. Additional animation properties control duration, timing, and repetition. Prefixes may be needed like -webkit- for some browsers. The homework suggests experimenting with changing the example animation.

Uploaded by

Kulin Ban
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Chapter 11

Animations in action

Now that we’ve looked at the transition property, let’s take a deeper look at
the animation property.

A symbiotic relationship
The animation property is applied to an element just like a transition. It also
needs a second part, called keyframes.
.element {
animation: ...
}

@keyframes animation-name {
/* Keyframes go here */
}
One benefit of having the keyframes defined separately is that it allows us to
create animations that can be reused multiple times.

51
The animation property
Applying these keyframes to an element is done with the animation property. It
is quite similar to transition but with some extra properties. An animation
could be written as the following shorthand:
animation: change-background 4s linear infinite;
Written as individual properties it would look like:
animation-name: change-background;
animation-duration: 4s;
animation-timing-function: linear;
animation-repeat: infinite;
Where a transition takes a property, such as “background” or “all”, the
animation property is given the name of the set of keyframes that describe the
animation sequence.
Animations have some properties that transitions don’t. For example, we can
tell the animation to alternate back and forth rather than looping from the
beginning each time.

Keyframes
A set of keyframes in CSS is a series of stops along the way through an animation.
Each “keyframe” is a written as a percentage.
I find it helps to describe this using an example. Let’s start with a div on a
web page that changes background over time. It begins with a blue background,
changes to an orange background and then finally green.

52
If we tried to explain to someone how these background colours changed over
time, we might say something like:
“Start with a blue background, then orange background halfway through and finish
with a green background”
Or, if we wanted to be more precise, we could use percentages to explain the
timing:
“Start at 0% of the way through with a blue background, then by 50% through be
orange, and at 100% have a green background”
We could then summarise this as:
0% Blue
50% Green
100% Orange
With these percentages we’ve created a series of “waypoints” that an animation
might pass through. All we need to do now is tell the browser that these
percentages are in fact keyframes and give the animation a name. The result is
this:
@keyframes change-background {
0% {
background: blue;
}
50% {
background: orange;
}
100% {

53
background: green;
}
}
The animation is called “change-background”. We’ll use that later when applying
the keyframes to an element.
As you read the code from the top down, the percentages are describing how
far through the animation each of these keyframes takes place. We can see it in
action here:

Figure 11.1: Source: http://codepen.io/donovanh/pen/WbqNwd?editors=110

As the animation takes place, the browser creates the in-between frames needed
to go from each of the background colours to the next. By telling the browser
that we wanted the div to begin one colour, be another one half way through
and finish on a third, the browser can do the work of creating the animation
between each of these points.
I’ve put together a CodePen example showing this in action.
Earlier, I mentioned using the animation-direction property to have an ani-
mation alternate. Here’s how it would look:

54
In this case I’ve changed the animation-direction property to alternate. See it
on CodePen here.

Prefixes
For the moment it’s still necessary to use the -webkit- prefix on the animation
property. I won’t add it to examples, but it will be needed for your animations
to work in browsers such as Safari.
In CodePen you can use the “Autoprefixer” option within the CSS settings. For
local development, I use the Gulp version of Autoprefixer. Prefix Free is a decent
alternative also.

Homework
Open up this keyframes example and try changing the code. See if you can break
it, and fix it. Even better, if you come up with something cool, let me know!
I love seeing how you’re getting on. You can email me or get in touch on Twitter.

55

You might also like