Figure 1: Soon as .animateClass is assigned to an element, animation will start playing. The class has a link to animationName. It must match the name specified by @keyframes rule. This animation is set to last 3 seconds or 3000ms as specified.

Note: Easing adds flavor to your animation — by providing a curve describing relative velocity of your animation at a particular spot on the time line.

We’ll cover easing and all other CSS animation properties throughout the remainder of this chapter, based on this simple example.

So How Does It Work?

You can animate any CSS property whose physical position, dimensions, angle or color can be changed. Basic animation is surprisingly simple to implement using keyframes.

CSS animation keyframes are specified using the @keyframes directive. A keyframe is simply the element’s state at a single point on animation time line.

CSS animation engine will automatically interpolate between animation keyframes. All you need to do is specify the state of CSS properties at the start and end points of the animation.

Once all of our keyframe locations are set up (which are often specified in percent) all we need to do is set up the defaults for our original element we wish to animate.

Then create a named animation using @keyframes animationName {…} format, that stores all the keyframes. We’ll take a look at that in just a moment!

Finally, create a special class that will define your animation’s duration, direction, repeatability, and easing type… and link it to the same animation name that was used by @keyframes directive. This process is explained visually on the next page.

CSS Animation Properties

The animation property is the short-hand to the 8 stand-alone animation properties described below:

animation-name — name of the keyframe specified by @keyframes rule.

animation-duration — duration of the animation in milliseconds.

animation-timing-function — specify easing function.

animation-delay — add delay before animation starts playing.

animation-iteration-count — number of times animation should play.

animation-direction — play forwards, backwards or alternate sequence.

animation-fill-mode — state of the animation when it is not playing.

animation-play-state — specify whether animation is running or is paused. In the following sections we’ll explore each one visually.

In the following sections we’ll explore each one visually.

animation-name

The alpha-numeric animation identifier name: