Detailed selector bindings for @keyframes keyframe animations in CSS3

In CSS3, we can create keyframe animation effects through @keyframes. We need to bind the @keyframes to the selector, otherwise no effect will occur. Also, we need to define the animation duration and animation name

Grammar

@keyframes Animationname {keyframes-selector {css-styles;}}

value	Description
Animationname	Necessary. Defines the name of the animation.
Keyframes-selector	Necessary. The percentage of the animation duration.

In CSS3, we specify the time for the change to occur as a percentage, or by the keyword "from" and "to", equivalent to 0% and 100%. Where 0% is the start time of the animation, and the end time of the 100% animation.

Keyframe Selector
Let's add some animation rules to @keyframes:

@keyframes Sunrise {      0% {         bottombottom:0;         left:340px;         Background: #f00;      }        33% {         bottombottom:340px;         left:340px;         Background: #ffd630;      }        66% {         bottombottom:340px;         left:40px;         Background: #ffd630;      }        100% {         bottombottom:0;         left:40px;         Background: #f00;      }   }

By adding these new animation rules, we introduced the keyframe selector. In the example code above, 0%, 33%, 66%, and 100% are the keyframe selectors. Of these, 0% and 100% can be replaced with "from" and "to".
The four sets of animation rules in the example express the four states of the animated element (four keyframes), and the styles that are in the four states. States that are not defined (for example, from 34% to 65%) make up the transition state between these defined states.
Although the specification is still being modified, some rules users should abide by it. For example, KeyFrames's writing order is not important, and they are played in ascending percentages. So, if you put the "to" keyframe before the "from" Keyframe, the animation won't change. In addition, if you do not specify a to or from or a corresponding percentage, the browser will automatically add. Therefore, the @keyframes syntax does not conform to the general CSS syntax of the cascading overlay rules.