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