Detailed explanation of selector binding of @keyframes keyframe animation in CSS3

In CSS3, we can create keyframe animation effects through @keyframes. We need to bind @keyframes to the selector, otherwise no effect will appear. At the same time, we also need to define the animation duration and animation name

Grammar

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

In css3, we specify the time when changes occur in percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. Among them, 0% is the start time of the animation, and 100% is the end time of the animation.

Keyframe Selector
Let’s add some animation rules in @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 For animation rules, we introduced the keyframe selector. In the above example code, 0%, 33%, 66%, and 100% are keyframe selectors. Among them, 0% and 100% can be replaced by "from" and "to".
The four sets of animation rules in the example express the four states (four key frames) of this animation element, and the styles when it is in these four states. Those undefined states (for example, from 34% to 65%) constitute the transition states between these defined states.
Although the specification is still being revised, there are some rules that users should still abide by. For example, the order in which keyframes are written does not matter, they will be played in ascending order of percentage. Therefore, if you put the "to" keyframe before the "from" keyframe, the playback of the animation will not change. In addition, if you do not specify to or from or the corresponding percentage, the browser will automatically add it. Therefore, the syntax of @keyframes does not comply with the cascading coverage rules of general CSS syntax.

The above is the detailed content of Detailed explanation of selector binding of @keyframes keyframe animation in CSS3. For more information, please follow other related articles on the PHP Chinese website!