CSS | Animations

What is 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 which contains the CSS properties which describes 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.

The @keyframes rule: Keyframes are the foundations with the help of which CSS Animations works. They define the display of the animation at the respective stages of its whole duration. For example: In the following 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                                              

chevron_right


Output:




GeeksforGeeks
A computer science portal for geeks

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-name: animation_name;
    
  • animation-duration: It is used to specify the time duration to takes animation to complete one cycle.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    animation duration

  • animation-timing-function: Specifies how the animation makes transitions through keyframes. It can have the following values:
    • ease: The animation starts slowly, then fast, and then finally ends slowly (this is default)
    • linear: The animation plays with the same speed from start to end
    • ease-in: The animation plays with a slow start
    • ease-out: The animation plays with a slow end
    • ease-in-out: The animation starts and ends slowly.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                    

    chevron_right

    
    

    Output:
    animation function

  • animation-delay: It is used to specify the delay when animation start.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                    

    chevron_right

    
    

    Output:
    animation delay

  • animation-iteration-count: It is used to specify the number of times the animation will repeat. It can specify as infinite to repeat the animation indefinitely.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                                       

    chevron_right

    
    

    Output:
    animation iteration count

  • animation-direction: Specifies the direction of the animation. It can have the following values:
    • normal: The animation is played forward. This is the default value.
    • reverse: The animation is played in the reverse direction i.e. backwards
    • alternate: The animation is played forwards first, and then backwards
    • alternate-reverse: The animation is played backwards first, and then forwards.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                                    

    chevron_right

    
    

    Output:
    animation direction

  • animation-fill-mode: Specifies what values are applied by the animation before and after it is executing.
    • none: Animation will not apply any properties to the element before or after it is executed. (default)
    • forwards: The element will retain the same animation properties of the last keyframe after the animation completes.
    • backwards: The element will get the properties of the first keyframe before the start of the animation.
    • both: The animation will follow the rules for both forwards and backwards i.e. it will get the properties defined for the initial keyframe before the start and will retain the value of the last keyframe after the completion of the animation.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                              

    chevron_right

    
    

    Output:
    animation

  • animation-play-state: Allows you to play/pause the animation.
  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                                   

    chevron_right

    
    

    Output:
    animation

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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>                    

    chevron_right

    
    

    Output:
    animation



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.