Tutorialspoint.dev

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:

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




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:

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

                            <!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:
    animation function

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

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

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

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

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

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

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

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

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter