Learn CSS Animation


CSS animation is a great way to add some life to your website. It allows you to animate elements without using JavaScript or Flash. You can animate borders, backgrounds, and even transform elements. The best part is that you can control the speed of the animation.

Here is a simple example of an animation that changes the background color of an <div> element:

Let's learn how to create animation in CSS.


How to Create CSS Animation

These are the steps to create CSS animation:

  1. Define the animation with the @keyframes rule.
  2. Apply the animation to an element using the animation property.
  3. Specify the animation name, duration, timing function, delay, and the number of iterations.

We will learn everything in detail but before that let's see some examples of animation.

Example

div {
    animation: mycolor 4s infinite;
}

@keyframes mycolor {
    from {background-color: red;}
    to {background-color: yellow;}
}
Try it

Output:

The above animation changes the background color of the <div> element from red to yellow.

To set the animation to the element we used the animation property and set the animation name 'mycolor' to the element. The animation name is the same as the name of the @keyframes rule.


@keyframes Rule

The @keyframes rule is used to define the animation. It contains the animation name, any animation breakpoints, and the properties intended to be animated.

The animation will move from one state to the next, and then back to the first state, and then to the next state, and so on as defined in the @keyframes rule.

To define keyframes, you use the @keyframes followed by the name of the animation name.

Here is the syntax of @keyframes rule:

@keyframes animation-name {
    0%   {property: value; ...}
    25%  {property: value; ...}
    50%  {property: value; ...}
    100% {property: value; ...}
} /* you can use any percentage value */

/* Or */

@keyframes animation-name {
    from {property: value; ...}
    to {property: value; ...}
}

@keyframes is the block where you define how the animation will look like. You can create as many breakpoints as you want.

Later just use this animation name in the animation property to apply the animation to any element.

Let's see some examples of @keyframes rule.

Example

div {
    animation: my-animation 2s infinite;
}

@keyframes my-animation {
    0% {
      background-color: red;
      transform: rotate(0deg);
    }
    25% {
      background-color: green;
      transform: rotate(90deg);
    }
    50% {
      background-color: blue;
      transform: rotate(180deg);
    }
    75% {
      background-color: yellow;
      transform: rotate(270deg);
    }
    100% {
      background-color: red;
      transform: rotate(360deg);
    }
}
Try it

Output:

The above animation changes the background color of the <div> element from red to yellow and rotates the element from 0 to 360 degrees.

Note: If your animation repeats then for smooth animation you should end your animation with the same state as the starting state. You can see the above example starts with red color and ends with red color also starts with 0 degree and ends with 360 degrees (0deg is the same as 360deg when rotated).


CSS Animation Properties

The @keyframes defined the animation but to apply the animation to the element we need to use the animation property.

There are many properties that can be used to control the animation. Here are some of the most important properties:

  1. animation-name - Specifies the name of the animation to use.
  2. animation-duration - Specifies how long time the animation should take to complete one cycle. Example 1s, 2s, etc (s means seconds).
  3. animation-timing-function - Specifies the speed curve of the animation. Example linear, ease, ease-in, ease-out, ease-in-out.
  4. animation-delay - Specifies a delay for the start of an animation. Example 1s, 2s, etc.
  5. animation-iteration-count - Specifies the number of times an animation should be played. Example infinite, 1, 2, etc.
  6. animation-direction - It tells the animation whether to play forwards, backward, or in alternate cycles.
  7. animation-fill-mode - It specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
  8. **animation - This is a shorthand property for all the above properties.

Let's see an example that covers all the above properties.

CSS Example animation

Here is working code for the above example.

Example

div {
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animate-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
}

@keyframes change-color {
    0% {
      background-color: red;
      transform: translate(0, 0);
    }
    25% {
      background-color: green;
      transform: translate(0, 150px);
    }
    50% {
      background-color: blue;
      transform: translate(150px, 150px);
    }
    75% {
      background-color: yellow;
      transform: translate(150px, 0);
    }
    100% {
      background-color: red;
      transform: translate(0, 0);
    }
}
Try it

Set Number of Times to Repeat Animation

By default, the animation will repeat only 1 time. To set the number of times to repeat the animation, use the animation-iteration-count property.

You can set the number of times to repeat the animation by using a number or the keyword infinite.

Here is an example of repeating the animation 3 times.

Example

div {
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: 3;
}
Try it

Set Direction of Animation

The animation-direction property specifies whether the animation should play forwards, backward, or in alternate cycles.

In alternate cycle mode, animation first plays forwards, then backwards, then forwards again, and so on.

Example

div {
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
Try it

Set Speed Curve of Animation

The animation-timing-function property specifies the speed curve of the animation. The speed curve defines how the animation will progress over the duration of each cycle.

Possible values for speed curve are:

Example

div {
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
Try it

Animation shorthand

The animation property is a shorthand property for all the animation properties.

Syntax:

animation: name duration timing-function delay iteration-count direction;

Here is an example of using the animation property.

Example

div {
    animation: change-color 2s linear 0s infinite alternate;
}
Try it

Quiz - CSS Animation Quiz

does CSS animation slow down the website?
Which CSS property is used to describe how an animation is to play?
What is the default value of the animation-iteration-count property?
Which of the following is not a valid value for the animation-fill-mode property?
What is the purpose of the @keyframes rule in CSS animation?
How can you specify the starting point of a CSS animation?
Which of the following is not a valid value for the animation-timing-function property?
How can you control the speed of a CSS animation?
How can you specify the number of times a CSS animation should be played?
How can you specify multiple animation names on a single element?