CSS @keyframes Rule (original) (raw)
Last Updated : 09 Oct, 2024
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.
HTML `