CSS Animation

CSS animation allows HTML elements to smoothly transition between different style configurations. For example,

Hover over to start animation effect

CSS animations are commonly used for enhancing user experience and adding visual interest to websites.

The advantages of CSS animation include improved performance, reduced reliance on JavaScript, and enhanced user experience through visually engaging effects.


CSS Animation Properties

CSS animation has the following properties:

  • @keyframe rule
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

We will look into each of these in detail.

Note: CSS animations involve defining keyframe styles and binding them to HTML elements for animation.


The keyframe Rule

The CSS @keyframe rule defines the element style at various points in time during the animation.

The keyframes are defined using percentages. The 0% keyframe is the starting point of the animation, and the 100% keyframe is the endpoint.

The percentages in between define the intermediate steps of the animation. For example,

@keyframes animate-background {
  0% {
    background-color: orange;
  }
  100% {
    background-color: red;
  }
}

Here, the background color of the element gradually changes from orange to red during the animation.

And animate-background is the animation name that associates the keyframe styles with the HTML element.


Creating a Simple Animation

The animation-name and animation-duration properties are required for creating a simple animation, along with the @keyframe rule.

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
    </head>
    <body>
        <div></div>
        <p>Hover above div to see animation.</p>
    </body>

</html>
div {
    width: 100px;
    height: 100px;
    background-color: purple;
}

div:hover {
    /* Specifies the animation name */
    animation-name: animate-background;

    /* Specifies the animation duration */
    animation-duration: 5s;
}

@keyframes animate-background {
    0% {
        background-color: orange;
    }

    100% {
        background-color: green;
    }
}

Browser Output

Hover above div to see animation.

In the above example,

  • animation-name: animate-background specifies the animation name
  • animation-duration: 5s specifies the animation duration

The @keyframe rule binds keyframe styles to the div element using the animate-background animation name.

As a result, the background of the div element gradually changes from orange color to green color during the animation duration.

Finally, the background color falls back to the originally specified purple color when the animation is completed.


CSS animation-delay Property

The animation-delay property specifies the delay time before the animation starts. It can be expressed in seconds (s) or milliseconds (ms).

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS animation-delay</title>
    </head>

    <body>
        <p>
            Hover the pink container to see animation. The animation starts
            after 2 seconds of hover and stops when the mouse leaves the
            container.
        </p>

        <div class="container">
            <div class="inner-div"></div>
        </div>
    </body>
</html>
.container {
    max-width: 700px;
    background-color: pink;
    padding: 20px;
}

.inner-div {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    top: 0;
}

.container:hover .inner-div {
    /* specifies the animation name */
    animation-name: move-to-right;

    /* specifies the animation duration */
    animation-duration: 5s;

    /* delays the animation by 2 seconds */
    animation-delay: 2s;
}

@keyframes move-to-right {
    0% {
        top: 0%;
        left: 0%;
    }

    100% {
        top: 0%;
        left: 85%;
    }
}

Browser Output

Hover the pink container to see animation. The animation starts after 2 seconds of hover and stops when the mouse leaves the container.

In the above example, the animation starts after the 2s delay while hovering over the pink container.


CSS animation-iteration-count Property

The animation-iteration-count property specifies the number of times the animation should be played.

The value of the animation-iteration-count property can be specified in the integers or once and infinite keywords.

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Animation</title>
    </head>

    <body>
        <p>
            Hover the pink container to see animation. The animation repeats 2
            times.
        </p>
        <div class="container">
            <div class="inner-div"></div>
        </div>
    </body>
</html>
.container {
    max-width: 700px;
    padding: 20px;
    background-color: pink;
}

.inner-div {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    top: 0;
}

.container:hover .inner-div {
    /* specifies the animation name */
    animation-name: move-to-right;

    /* specifies the animation duration */
    animation-duration: 3s;

    /* repeats the animation 2 times */
    animation-iteration-count: 2;
}

@keyframes move-to-right {
    0% {
        top: 0%;
        left: 0%;
    }

    100% {
        top: 0%;
        left: 85%;
    }
}

Browser Output

Hover the pink container to see animation. The animation repeats 2 times.

In the above example,

animation-iteration-count: 2;

repeats the animation two times.


CSS animation-direction Property

The animation-direction property specifies the direction for the animation.

The possible values for the animation-direction property are:

  • normal: animation plays forward, default value
  • reverse: animation plays backward
  • alternate: animation alternates between forward and backward
  • alternate-reverse: animation alternates between backward and forward

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS animation-direction</title>
    </head>

    <body>
        <p>
                Hover the pink container to see animation. The animation repeats
                2 times in alternate directions: forward and backward
                respectively.
            </p>
        <div class="container">
            <div class="inner-div"></div>           
        </div>
    </body>

</html>
.container {
    max-width: 700px;
    background-color: pink;
    padding: 20px;
}

.inner-div {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    top: 0;
}

.container:hover .inner-div {
    /* specifies the animation name */
    animation-name: move-to-right;

    /* specifies the animation duration */
    animation-duration: 3s;

    /* repeats the animation 2 times */
    animation-iteration-count: 2;

    /* alternates the animation in forward and backward direction */
    animation-direction: alternate;
}

@keyframes move-to-right {
    0% {
        top: 0%;
        left: 0%;
    }

    100% {
        top: 0%;
        left: 85%;
    }
}

Browser Output

Hover the pink container to see animation. The animation repeats 2 times in alternate directions: forward and backward respectively.

In the above example,

animation-direction: alternate;

moves the animation in alternate direction: forward and backward respectively.

Note: The animation-iteration-count property should be set to a minimum value of 2 to visualize the animation-direction property.

If the value is set to 1, the animation will only be played once, and the animation-direction property will have no effect.


CSS animation-timing-function Property

The animation-timing-function property specifies how the intermediate property values are calculated during the animation duration.

The animation-timing-function property has the following values:

  • ease: animation starts slow, accelerates in between, ends slowly
  • ease-in: animation starts slow and ends fast
  • ease-out: animation starts fast and ends slowly
  • ease-in-out: animation starts slow, accelerates fast, and ends slowly
  • linear: constant pace throughout the animation duration
  • cubic-bezier(n, n, n, n): allows to define the animation speed manually

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Animation Speed</title>
    </head>

    <body>
        <p>
            Hover the pink container to visualize effect of different
            animation-timing-function values.
        </p>
        <div class="container">
            <div class="box box-1">ease</div>
            <div class="box box-2">ease-in</div>
            <div class="box box-3">ease-out</div>
            <div class="box box-4">ease-in-out</div>
            <div class="box box-5">linear</div>
            <div class="box box-6">cubic-bezier</div>
        </div>
    </body>
</html>
.container {
    max-width: 700px;
    background-color: pink;
}

.container > div {
    width: 100px;
    border: 1px solid black;
    background-color: orange;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
}

/* adds animation after hovering the container div element */
.container:hover div {
    /* specify the animation name */
    animation-name: move-to-right;

    /* specify the animation duration */
    animation-duration: 5s;
}

@keyframes move-to-right {
    0% {
        left: 0;
    }

    100% {
        left: 85%;
    }
}

/* specifies the timing function for the first div */
div.box-1 {
    animation-timing-function: ease;
}

/* specifies the timing function for the second div */
div.box-2 {
    animation-timing-function: ease-in;
}

/* specifies the timing function for the third div */
div.box-3 {
    animation-timing-function: ease-out;
}

/* specifies the timing function for the fourth div */
div.box-4 {
    animation-timing-function: ease-in-out;
}

/* specifies the timing function for the fifth div */
div.box-5 {
    animation-timing-function: linear;
}

/* specifies the timing function for the sixth div */
div.box-6 {
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

Browser Output

Hover the pink container to visualize effect of different animation-timing-function values.

ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier

The above example illustrates the different animation speed of different timing function.


CSS animation-fill-mode Property

The animation-fill-mode property decides how the animation applies to an element before and after the animation.

By default, the animation only affects the targetted element during the animation duration.

The animation-fill-mode property has the following possible values:

  • none: no styles are applied before and after the animation (default value)
  • forwards: styles of the last keyframes are applied after the animation
  • backwards: styles of the first keyframe are applied after the animation
  • both: applies styles both before and after the animation

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Animation Mode</title>
    </head>

    <body>
        <p>
            Hover this container to look effect of animation-fill-mode values.
        </p>
        <div class="container">
            <div class="box box-1">forwards</div>
            <div class="box box-2">backwards</div>
            <div class="box box-3">both</div>
            <div class="box box-4">none</div>
        </div>
    </body>
</html>
.container {
    max-width: 700px;
    background-color: pink;
}

.container > div {
    width: 100px;
    border: 1px solid black;
    background-color: orange;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
}

/* adds animation after hovering the container div element */
.container:hover div {
    /* specify the animation name */
    animation-name: move-to-right;

    /* specify the animation duration */
    animation-duration: 5s;
}

@keyframes move-to-right {
    0% {
        left: 0;
        background-color: red;
    }

    100% {
        left: 85%;
        background-color: yellow;
    }
}

/* specifies the animation fill mode for first div */
div.box-1 {
    animation-fill-mode: forwards;
}

/* specifies the animation fill mode for second div */
div.box-2 {
    animation-fill-mode: backwards;
}

/* specifies the animation fill mode for third div */
div.box-3 {
    animation-fill-mode: both;
}

/* specifies the animation fill mode for fourth div */
div.box-4 {
    animation-fill-mode: none;
}

Browser Output

Hover this container to look effect of animation-fill-mode values.

forwards
backwards
both
none

The above example illustrates the effect of the animation-fill-mode property.


CSS animation Property

The animation property is a shorthand property that combines multiple animation-related properties into a single declaration.

The syntax of the animation property is as follows:

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

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS animation Property</title>
    </head>

    <body>
        <p>Hover over the pink container to start animation.</p>
        <div class="container">
            <div class="inner-div"></div>
        </div>
    </body>
</html>
.container {
    max-width: 700px;
    height: 150px;
    padding: 20px;
    background-color: pink;
}

.inner-div {
    width: 100px;
    height: 140px;
    background: linear-gradient(to right, orange, red);
    position: relative;
}

.container:hover .inner-div {
    /* shorthand animation property */
    animation: animate-div 2s ease-in-out 0.1s 3 alternate forwards;
}
@keyframes animate-div {
    0% {
        left: 0%;
    }
    100% {
        left: 80%;
    }
}

Browser Output

Hover over the pink container to start animation.

In the above example,

animation: rotate-div 4s linear 2s 4 normal forwards;

is equivalent to,

animation-name: rotate-div;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 4;
animation-direction: normal;
animation-fill-mode: forwards;

Note: The transition property is used to create basic animations that transition smoothly between two states: an initial state and a final state.

However, it doesn't support intermediate steps or multiple keyframes, unlike the animation property.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges