Tutorial for CSS3 Animation Property

hese days, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used accurately, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users. These helps to catch the eye of the users.

CSS3 Animation

CSS3 Animation

In this tutorial, we’re going to introduce you to some basic properties of CSS animations; a highly performant way of doing things which is becoming more and more popular as browser support improves. Having covered the basics, we’re going to build a few quick example as well.

An Introduction to @keyframes and Animation

The main component of CSS animations is @keyframes, the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside @keyframes, you can define these stages, each having a different style declaration.

Next, to make CSS animations work, you need to bind the @keyframes to a selector. This will gradually parse all the code inside the @keyframes declarations and change the initial style to the new style, based on the stages.

CSS3 Animation

CSS3 Animation

The @keyframes

Here we’ll set the animation stages. Our @keyframes properties are:

A name of our choosing (tutsFade in this case).
Stages: 0%-100%; from (equal to 0%) and to (equal to 100%).
CSS styles: the style that you would like to apply for each stage.
For example: @keyframes tutsFade { 0% { opacity: 1; } 100% { opacity: 0; } } [/code]


or the shorthand:


The code above will apply a transition to the opacity of an element, from opacity: 1 to opacity: 0. Each of the approaches above will achieve the same end result.

Defining Keyframes

In my previous blogs, we discussed keyframes; It had a point within the animation where a known state is specified. In order state my point let’s created a simple set of keyframes where the background color changes from blue to red to green to purple and back to blue again. To begin with, we need to define a @keyframes rule somewhere in our stylesheet (it doesn’t matter where):


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

Moving on, we determine individual keyframes at percentage points throughout the duration of our animation:

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

CSS3 Animation

CSS3 Animation

0% is the starting keyframe — you can also use the form 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.

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+:

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

The Animation

The animation property is used to call @keyframes inside a CSS selector. Animation can have multiple properties:

CSS3 Animation

CSS3 Animation

  • animation-name: @keyframes name (remember we chose tutsFade).
  • animation-duration: the timeframe length, the total duration of the animation from start to the end.
  • animation-timing-function: sets the animation speed ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay: the delay before our animation will start.
  • animation-iteration-count: how many times it will iterate through animation.
  • animation-direction: gives you the ability to change the loop direction, from start to end, or from end to start, or both.
  • animation-fill-mode: specifies which styles will be applied to the element when our animation is finished ( none | forwards | backwards | both )

For example:

or shorthand:

The code above will create a blinking effect, with a 1-second animation delay, a 4-second total animation duration, with alternate direction and infinite linear loop iterations.

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:

Adding Vendor Prefixes
Whilst a working draft, we need to use browser-specific prefixes to ensure the best browser support possible. The standard prefixes apply:

  • Chrome & Safari: -webKit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-

An animation property using vendor prefixes will look like:

alongside with @keyframes:

For the sake of readability during this tutorial, I will continue further without using prefixes, but the final version will include them and I would like to encourage you to use them in your CSS code.

CSS3 Animation

CSS3 Animation

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:

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 subtle 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.
CSS3 Animation

CSS3 Animation

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.
Like transition-delay, animation-delay specifies the period in seconds (s) or milliseconds (ms) before an animation will start. The following are identical:

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.

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 backwards 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:

Again, you can use a single animation shortcut to define all six values in the order shown above.

Now, See The Result!
CSS3 Animation

CSS3 Animation

That would be a start, but first, try adapting it for your own animations. Go for it.

For More Resources & Further Study, Check: