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.
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.
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.