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.

div {
    animation: mycolor 4s infinite;
}

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

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.

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);
    }
}

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.

Here is working code for the above 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);
    }
}

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.

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

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.

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

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:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is the default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

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

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.

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