Open In App
Related Articles

CSS Animations

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

CSS Animation: CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. 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. 

What is a Keyframe?

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. For example: 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. 

Syntax:

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

Animation Properties:

There are certain animation properties given below:

  • 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.

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #gfg {
            animation-name: color;
            animation-duration: 25s;
            padding-top: 30px;
            padding-bottom: 30px;
            font-family: Times New Roman;
        }
 
        #geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
        }
 
        #geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
        }
 
        @keyframes color {
            0% {
                background-color: red;
            }
 
            50% {
                background-color: orange;
            }
 
            100% {
                background-color: brown;
            }
        }
    </style>
</head>
 
<body>
    <div id="gfg">
        <div id="geeks">GeeksforGeeks</div>
        <div id="geeks1">A computer science portal for geeks</div>
    </div>
</body>
</html>

                    

Output:

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

HTML

<html>
<head>
    <style>
        #gfg1 {
            animation-name: text;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
 
        #geek1 {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
        }
 
        #geek2 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
        }
 
        @keyframes text {
            from {
                margin-top: 400px;
            }
 
            to {
                margin-top: 0px;
            }
        }
    </style>
</head>
 
<body>
    <div id="gfg1">
        <div id="geek1">GeeksforGeeks</div>
        <div id="geek2">A computer science portal for geeks</div>
    </div>
</body>
</html>

                    

Output: The animation will look like this:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }
 
        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }
 
        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>
    <div class="geeks">GeeksforGeeks</div>
    <div class="geeks1">A computer science portal for geeks</div>
    <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:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }
 
        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }
 
        #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>
    <div class="geeks">GeeksforGeeks</div>
    <div class="geeks1">A computer science portal for geeks</div>
    <h2 id="one">Text animation without delayed.</h2>
    <h2 id="two">Text animation with 10 second delay.</h2>
</body>
</html>

                    

Output:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }
 
        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }
 
        #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>
    <div class="geeks">GeeksforGeeks</div>
    <div class="geeks1">A computer science portal for geeks</div>
    <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:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }
 
        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }
 
        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>
    <div class="geeks">GeeksforGeeks</div>
    <div class="geeks1">A computer science portal for geeks</div>
    <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:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }
 
        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }
 
        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>
    <div class="geeks">GeeksforGeeks</div>
    <div class="geeks1">A computer science portal for geeks</div>
    <h2 id="one">none</h2>
    <h2 id="two">forwards</h2>
    <h2 id="three">backwards</h2>
    <h2 id="four">both</h2>
</body>
</html>

                    

Output:

Animation Shorthand Property: It is a shorthand way of implying the animation properties for a quicker code. The properties should be in the following order:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] 
[animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];

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

Example 8: 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=
</body>
</html>

                    

Output:

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

Example 9: 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=
</body>
</html>

                    

Output:

Supported Browsers:

  • Google Chrome 43.0
  • Microsoft Edge 12.0
  • Firefox 16.0
  • Safari 9.0
  • Opera 30.0


Last Updated : 21 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials