CSS | @keyframes Rule

The @keyframes rule is used to specify the animation rule. An animation is created by using changeable CSS styles. During the animation CSS property can change many times.

Note: For the best support of browser always specify both the 0% and the 100% selectors.

Syntax:



@keyframes animation-name {keyframes-selector {css-styles;}}

Property value: This parameter accepts three values that mentioned above and described below:

  • animation-name: The animation-name is required and it defines the animation name.
  • keyframes-selector: The keyframes-selector defines the percentage of the animation. It lies between 0% to 100%. One animation can contain many selectors.
  • css-styles: The css-styles defines the one or more legal or applicable CSS style properties.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <style
        h1 {
            color: white;
            text-align:center;
        }
        div {
            background: green;
            position: relative;
            animation: gfg 10s infinite;
        }
          
        /* keyframe CSS style */
        @keyframes gfg {
            0% {
                top: 0px; 
                width: 00px;
            }
            25% {
                top: 50px; 
                background: LawnGreen; 
                width: 50px;
            }
            50% {
                top: 100px; 
                background: LightGreen ; 
                width: 100px;
            }
            75% {
                top: 150px; 
                background:MediumSeaGreen; 
                width: 150px;
            }
            100% {
                top: 200px; 
                color: white;
                background: Green; 
                width: 200px;
            }
        }
    </style>
</head>
  
<body>
    <div>
        <h1>Geeksforgeeks</h1>
    </div>
</body>
  
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <style
        h1{
            color: white;
            text-align:center;
        }
        div {
            background: green;
            position: relative;
            animation: gfg 8s infinite;
        }
          
        @keyframes gfg {
            0% {
                top: 0px; 
                width: 0px;
            }
            25% {
                top: 50px !important; 
                background: LawnGreen; 
            }
            50% {
                top: 100px !important; 
                background: LightGreen ; 
            }
            100% {
                top: 200px !important; 
                color: white; 
                background: Green; 
                width: 200px;
            }
        }
    </style>
</head>
  
<body>
    <center>
        <div>
            <h1>Geeksforgeeks</h1>
        </div>
    </center>
</body>
  
</html>                    

chevron_right


Output:

Supported Browsers: The browser supported by @keyframes Rule are listed below:

  • Google Chrome 43.0, 4.0 -webkit-
  • Internet Explorer 10.0
  • Firefox 16.0, 5.0 -moz-
  • Safari 9.0, 4.0 -webkit-
  • Opera 30.0, 15.0 -webkit-, 12.0 -o-


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.



Improved By : shubham_singh



Article Tags :

Be the First to upvote.


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