Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS @keyframes Rule

  • Last Updated : 05 Nov, 2021

The @keyframes rule in CSS 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.

We need to specify when there is a change in style that takes place in percent, or contains the keywords “from” and “to”, which is the same as 0% and 100% where 0% represents the beginning of the animation & 100% represents the completion of the animation. We can control the appearance of the animation by using animation properties & is possible to bind the animation to selectors. The keyframe ignores the !important rule in CSS.

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: This example describes the use of the @keyframe rule to add the animation to the element.

HTML




<!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: This example describes the use of the @keyframe rule using the !important rule in CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
    h1 {
        color: white;
        text-align: center;
    }
      
    div {
        background: green;
        position: relative;
        animation: gfg 7s 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: 210px;
        }
    }
    </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-
  • Microsoft Edge 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
Recommended Articles
Page :

Start Your Coding Journey Now!