CSS @keyframes Rule

In CSS, the @keyframes rule is used to specify the animation rule. Changeable CSS styles are used to create animations. CSS properties can change several times during the animation.

We need to specify when there is a change in style that occurs in percent or contains the keywords "from" and "to," which are the same as 0% and 100%, where 0% represents the start of the animation and 100% represents the end of the animation. The appearance of the animation can be controlled using animation properties, and it is possible to bind the animation to selectors. CSS is an important rule that is ignored by the keyframe.




Property Values

Value Description
animation-name Required. The name of the animation is defined here.
keyframes-selector Required. The percentage of the duration of the animation. Legal values: 0-100 percent from (the same as 0%) to (same as 100 percent ) It's worth noting that you can have multiple keyframes-selectors in a single animation.
css-styles Required. One or more CSS style properties that are legal

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
@keyframes 43.0
4.0 -webkit-
5.0 -moz-
4.0 -webkit-
10.0 30.0
15.0 -webkit-
12.0 -o-