Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS Animations

Improve Article
Save Article
Like Article
author
prakhar7
scholar
30 published articles
Improve Article
Save Article
Like Article

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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" />
</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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" />
</body>
</html>
Output:
Supported Browsers:
  • Google Chrome 43.0
  • Microsoft Edge 12.0
  • Firefox 16.0
  • Safari 9.0
  • Opera 30.0

My Personal Notes
arrow_drop_up
Last Updated :
15 May, 2023
Like Article

Save Article

Similar Reads
1.
How to Play and Pause CSS Animations using CSS Custom Properties ?
2.
How to dynamically create '@-Keyframe' CSS animations?
3.
W3.CSS Animations
4.
Transpose Clippath CSS Keyframe animations into anime.js animation
5.
How to make CSS Animations ?
6.
Primer CSS Animations
7.
How to sync css animations with HTML5 audio ?
8.
Why are CSS animations and transitions blocked by JavaScript ?
9.
How to use steps() method in CSS Animations ?
10.
How to create Hover animations on Button ?
Related Tutorials
1.
Onsen UI
2.
React Material UI
3.
NuxtJS
4.
D3.js
5.
Spectre CSS
Previous
CSS Shadow Effect
Next

CSS Border Images
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
prakhar7
prakhar7
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox