CSS | @keyframes Rule

Last Updated : 14 Oct, 2019

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:

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

Output:

Example 2:

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

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-

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles