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 be changed 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;}}

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.

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


Article Tags :

Be the First to upvote.


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