VOOZH about

URL: https://www.geeksforgeeks.org/css/css-keyframes-rule/

⇱ CSS @keyframes Rule - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS @keyframes Rule

Last Updated : 11 Jul, 2025

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% and 100% 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:

TermDescription
animation-nameSpecifies the name of the animation, which is used to reference it in the animation or animation-name property.
keyframes-selectorIndicates 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-stylesSpecifies 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.

Output:

Example 2: Using Multiple Keyframes

You can define multiple keyframes to create more complex animations:

Output:

Supported Browsers:

The browser supported by @keyframes Rule are listed below:

Comment
Article Tags: