CSS @keyframes Rule - GeeksforGeeks

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-
shubham_singh
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?