The @keyframe rules are used to define an animation in a gradual mode of movement. The keyframes describe the state of properties at each stage of the animation. Optionally, they also specify the timing function (similar to transition-timing-function) that controls the pace of the transition between each stage. You define a set of keyframes using @keyframes followed by the name you want to give the animation. All the rules for the keyframes go inside a pair of curly braces. 


selector { 

    @keyframes animation_name { keyframes_selector { css_styles; } }



A keyframes-selector requires the percentage of the animation duration. The browser automatically sorts the keyframe definitions into ascending order. However, using this shorthand tends to make @keyframe rules difficult to read. The following list represents the values settings for the @keyframes rules:

  • animation_name; This value is required and it specifies the name of the animation being created.
  • keyframes_selector; Also required. It represents the value of the animation duration given in percentage (%) or keywords from / to. Percentage may be from 0% to 100%, where 0% equals ‘from’ and 100% equals ‘to’.
  • css_styles; The last values is also required and it refers to one or more CSS style properties.
NOTE: Note that examples from this moment on for simplicity reasons may not include proprietary selectors from this point on.


The @keyframes rule example:


›› go to examples ››