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.
Syntax
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- |
16.0
5.0 -moz- |
9.0
4.0 -webkit- |
10.0 |
30.0
15.0 -webkit- 12.0 -o- |