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.
<!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.
<!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 and above
- Microsoft Edge 12.0 and above
- Firefox 16.0 and above
- Internet Explorer 10.0 and above
- Safari 9.0 and above
- Opera 30.0 and above