CSS @keyframes Rules

February 10, 2021 12:37 pm IST

You are Here:

CSS @keyframes Rules

CSS @keyframes rule controls the animation sequence by defining styles for keyframes.

Note: To use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration.

Declaration Rules

The following rules must be followed while declaring @keyframes.

If a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states.
If multiple keyframe sets exist for a given name, the last one encountered by the parser is used.
Properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated.

Using from and to

In the following example, we will use from and to to specify the states of the animation.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid #000; line-height: 6; text-align: center; animation: myAnimation 2s infinite; -webkit-animation: myAnimation 2s infinite; /* Safari 4.0 - 8.0 */ animation-direction: alternate; -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */ } @-webkit-keyframes myAnimation { from {background-color: red;} to {background-color: green;} } @keyframes myAnimation { from {background-color: red;} to {background-color: green;} } </style> </head> <body> <h1>CSS @keyframes Rule</h1> <div> Div </div> </body> </html>

Run

Syntax

Using CSS

@keyframes myAnimation { 0% {color: red:}; 100% {color: blue;} }

Property Value

Value	Type	Explanation
animationName	Required	Specifies the name of the animation.
keyframes-selector	Required	Specifies a percentage of the time through the animation sequence at which the specified keyframe should occur. Possible values are: 0 - 100% from (same as 0%) - to (same as 100%) Note: When you are used 0 - 100% you can have many keyframes-selector in one animation for more control.
css-styles	Required	Specifies CSS style properties.

Using 0% and 100%

In the following example, we will use 0% and 100% to specify the states of the animation.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid #000; line-height: 6; text-align: center; animation: myAnimation 2s infinite; -webkit-animation: myAnimation 2s infinite; /* Safari 4.0 - 8.0 */ animation-direction: alternate; -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */ } @-webkit-keyframes myAnimation { 0% {background-color: red;} 100% {background-color: green;} } @keyframes myAnimation { 0% {background-color: red;} 100% {background-color: green;} } </style> </head> <body> <h1>CSS @keyframes Rule</h1> <div> Div </div> </body> </html>

Run

Defining Multiple Times

In the following example, we will use 0%, 20%, 40%, 60%, 80%, and 100% to specify the states of the animation. In this case, the animation is controlled more accurately.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid #000; line-height: 6; text-align: center; animation: myAnimation 5s infinite; -webkit-animation: myAnimation 5s infinite; /* Safari 4.0 - 8.0 */ animation-direction: alternate; -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */ } @-webkit-keyframes myAnimation { 0% {background-color: black;} 20% {background-color: blue;} 40% {background-color: brown;} 60% {background-color: green;} 80% {background-color: coral;} 100% {background-color: white;} } @keyframes myAnimation { 0% {background-color: black;} 20% {background-color: blue;} 40% {background-color: brown;} 60% {background-color: green;} 80% {background-color: coral;} 100% {background-color: white;} } </style> </head> <body> <h1>CSS @keyframes Rule</h1> <div> Div </div> </body> </html>

Run