CSS @keyframes Rule
The CSS @keyframes rule defines animations by specifying keyframes that describe the styles to be applied at various points during the animation duration. It allows for smooth transitions and transformations in web elements, controlled through percentages or from-to values.
Note:For optimal browser support, always include both
0%and100%keyframes in your animation.
Syntax:
@keyframes animation-name {
keyframes-selector {
css-styles;
}
}
Property value:
This parameter accepts three values that are mentioned above and described below:
| Term | Description |
|---|---|
| animation-name | Specifies the name of the animation, which is used to reference it in the animation or animation-name property. |
| keyframes-selector | Indicates the percentage of the animation sequence (e.g., 0%, 50%, 100%) or can be defined using from (equivalent to 0%) and to (equivalent to 100%). |
| css-styles | Specifies one or more valid CSS style properties to be applied at each keyframe of the animation. |
Basic Usage Examples
Example 1: Basic Animation Using @keyframes
This example demonstrates how to animate the background color of a div from red to blue.
<!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: Using Multiple Keyframes
You can define multiple keyframes to create more complex animations:
<!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:
CSS @keyframes Rule – FAQs
What is the @keyframes rule in CSS?
The @keyframes rule is used to define animations in CSS. It allows you to specify how an element should change styles at different stages during the animation.
How do I use the @keyframes rule in CSS?
You use @keyframes to define the animation and then apply it to an element using the animation or animation-name property.
What are the required steps to create a CSS animation using @keyframes?
Define the keyframes using @keyframes, set the animation properties like animation-duration, animation-timing-function, and apply the animation to an element using animation or related properties.
How do I control the speed of an animation with @keyframes?
The speed of the animation is controlled using the animation-duration property, which sets the length of the animation cycle.
Can I add delays or pauses between keyframes in CSS?
Yes, you can add delays using animation-delay, and you can pause an animation by using animation-play-state: paused.
