CSS | @keyframes Rule - GeeksforGeeks

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-

My Personal Notes

Recommended Posts: