Open In App

CSS Animations

Improve
Improve
Like Article
Like
Save
Share
Report

CSS Animations allows to control the elements by changing their motions or display. Animation is a technique to change the appearance and behaviour of various elements in web pages.

It has two parts, one contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur. 

Syntax:

/*property-name*/: /*value*/;

Animation Properties:

There are certain animation properties given below:

Property

Description

animation-name

It is used to specify the name of the @keyframes describing the animation.

animation-duration

It is used to specify the time duration it takes animation to complete one cycle.

animation-timing-function

It specifies how animations make transitions through keyframes. There are several presets available in CSS which are used as the value for the animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out. 

animation-delay

It specifies the delay of the start of an animation.

animation-iteration-count

This specifies the number of times the animation will be repeated.

animation-direction

It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse.

animation-fill-mode

It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both.

animation-play-state

This property specifies whether the animation is running or paused.

What is a Keyframe ?

@keyframes Rule or Keyframes are the foundations with the help of which CSS Animations work. They define the display of the animation at the respective stages of its whole duration.

CSS Animations Examples

In the first example code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown. 

Example 1: This example describes the CSS Animation using the @keyframe rule.

Javascript
<!DOCTYPE html>
<html>
    <head>
        <style>
            #gfg {
                animation-name: color;
                animation-duration: 5s;
                padding-top: 30px;
                padding-bottom: 30px;
                font-family: Times New Roman;
            }
            @keyframes color {
                0% {
                    background-color: red;
                }
                50% {
                    background-color: orange;
                }
                100% {
                    background-color: brown;
                }
            }
        </style>
    </head>

    <body>
        <div id="gfg">
            <h2>CSS Keyframes Animation</h2>
        </div>
    </body>
</html>

Output:

css-keyframe-animation-example

css animation example

Example 2: This example describes the CSS Animation Properties using the animation-timing-function property.

HTML
<!DOCTYPE html>
<html>
    <head>
        <style>
            h2 {
                width: 350px;
                animation-name: text;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                background-color: rgb(255,210,85);
            }

            #one {
                animation-timing-function: ease;
            }

            #two {
                animation-timing-function: linear;
            }

            #three {
                animation-timing-function: ease-in;
            }

            #four {
                animation-timing-function: ease-out;
            }

            #five {
                animation-timing-function: ease-in-out;
            }

            @keyframes text {
                from {
                    margin-left: 60%;
                }

                to {
                    margin-left: 0%;
                }
            }
        </style>
    </head>

    <body>
        <h2 id="one">This text is ease.</h2>
        <h2 id="two">This text is linear.</h2>
        <h2 id="three">This text is ease-in.</h2>
        <h2 id="four">This text is ease-out.</h2>
        <h2 id="five">
            This text is ease-in-out.
        </h2>
    </body>
</html>

Output:

css-keyframe-animation-example

css animation timing funtion

Example 3: This example describes the CSS Animation Properties using the animation-delay property.

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        #one {
            animation-name: example;
            animation-duration: 10s;
        }

        #two {
            animation-name: example;
            animation-duration: 10s;
            animation-delay: 10s;
        }

        @keyframes example {
            from {
                background-color: orange;
            }

            to {
                background-color: white;
            }
        }
    </style>
</head>

<body>
    <h2 id="one">Text animation without delayed.</h2>
    <h2 id="two">Text animation with 10 second delay.</h2>
</body>
</html>

Output:

Example 4: This example describes the CSS Animation Properties using an animation-iteration-count property.

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        #one {
            animation-name: example;
            animation-duration: 2s;
            animation-iteration-count: 2;
        }

        #two {
            animation-name: example;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes example {
            from {
                background-color: orange;
            }

            to {
                background-color: white;
            }
        }
    </style>
</head>

<body>
    <h2 id="one">This text changes its color two times.</h2>
    <h2 id="two">This text changes its color infinite times.</h2>
</body>
</html>

Output:

css-animation-iteration-property-example

css animation iteration property

Example 5: This example describes the CSS Animation Properties using the animation-direction property.

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
            width: 100%;
            animation-name: text;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        #one {
            animation-direction: normal;
        }

        #two {
            animation-direction: reverse;
        }

        #three {
            animation-direction: alternate;
        }

        #four {
            animation-direction: alternate-reverse;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2 id="one">This text is normal.</h2>
    <h2 id="two">This text is reverse.</h2>
    <h2 id="three">This text is alternate.</h2>
    <h2 id="four">This text is alternate-reverse.</h2>
</body>
</html>

Output:

css-animation-direction-property-example

css animation direction property example

Example 6: This example describes the CSS Animation Properties using an animation-fill-mode property.

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
            width: 400px;
            background-color: orange;
            animation-name: text;
            animation-duration: 3s;
        }

        #one {
            animation-fill-mode: none;
        }

        #two {
            animation-fill-mode: forwards;
        }

        #three {
            animation-fill-mode: backwards;
            animation-delay: 2s;
        }

        #four {
            animation-fill-mode: both;
            animation-delay: 2s;
        }

        @keyframes text {
            from {
                margin-left: 0%;
                background-color: #aaaaaa;
            }

            to {
                margin-left: 60%;
                background-color: #008000;
            }
        }
    </style>
</head>

<body>
    <h2 id="one">none</h2>
    <h2 id="two">forwards</h2>
    <h2 id="three">backwards</h2>
    <h2 id="four">both</h2>
</body>
</html>

Output:

css-animation-fill-property-example

css animation fill property

For example, normally the animation code would be like this:

Example 7: This example describes the CSS Animation Properties using an animation-play-state property, without an animation shorthand property.

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        #g4g {
            width: 400px;
            height: 100px;
            position: relative;
            animation-name: GFG;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes GFG {
            0% {
                left: 0px;
                top: 0px;
            }

            25% {
                left: 200px;
                top: 200px;
            }

            50% {
                left: 200px;
                top: 0px;
            }

            75% {
                left: 0px;
                top: 200px;
            }

            100% {
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>

<body>
    <img id="g4g" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" />
</body>
</html>

Output:

In shorthand, the above HTML code can be written as:

Example 8: This example describes the CSS Animation Properties using an animation-play-state property, with an animation shorthand property.

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        #geeks4g {
            width: 400px;
            height: 100px;
            position: relative;
            animation: GFG 5s linear 1s infinite alternate;
        }

        @keyframes GFG {
            0% {
                left: 0px;
                top: 0px;
            }

            25% {
                left: 200px;
                top: 200px;
            }

            50% {
                left: 200px;
                top: 0px;
            }

            75% {
                left: 0px;
                top: 200px;
            }

            100% {
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>

<body>
    <img id="geeks4g" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" />
</body>
</html>

Output:

Supported Browsers: Following browsers support the CSS Animations



Last Updated : 22 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads