`@keyframes`

Like real production artists, we create a storyboard for animation.

Time to read: less than 5 min

Briefly

The @keyframes directive is used to create keyframes for CSS animations.

Example

        
          
          @keyframes circle-to-square {  from {    border-radius: 50%;    background-color: red;  }  to {    border-radius: 0;    background-color: blue;  }}
          @keyframes circle-to-square {
  from {
    border-radius: 50%;
    background-color: red;
  }
  to {
    border-radius: 0;
    background-color: blue;
  }
}

How to Understand

What does any animation represent? It is a transition from one state of an element to another state.

To tell the browser where to start and where to end the animation, the @keyframes directive is used.

How It Is Written

After the keyword @keyframes, we must write the animation name. It will be needed to link the animation for a specific element with the keyframes. Ideally, the animation name should be unique.

Keyframes can be defined using the keywords from (starting frame) and to (ending frame). This is convenient if you have only two keyframes. If there are more than two frames, percentages can be used.

        
          
          @keyframes circle-to-square {  from {    border-radius: 50%;    background-color: red;  }  50% {    border-radius: 25%;    background-color: green;  }  to {    border-radius: 0;    background-color: blue;  }}
          @keyframes circle-to-square {
  from {
    border-radius: 50%;
    background-color: red;
  }
  50% {
    border-radius: 25%;
    background-color: green;
  }
  to {
    border-radius: 0;
    background-color: blue;
  }
}

The browser interprets the keyword from as 0%, and the keyword to as 100%.

Tips

💡 Assign a unique name to each animation.

💡 from equals 0%, to equals 100%.

💡 If a simple animation from the initial value to the final value is needed, only the final frame can be specified within the directive.

        
          
          @keyframes circle-to-square {  to {    border-radius: 0;    background-color: blue;  }}
          @keyframes circle-to-square {
  to {
    border-radius: 0;
    background-color: blue;
  }
}