@keyframes

By defining styles for keyframes along the animation sequence, the @keyframes CSS rule controls the intermediate steps in a CSS animation sequence. This gives you more control over the animation sequence's intermediate steps than transitions.

Syntax

  
@keyframes rotate-90 {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(90deg);
  }
}
  

Values

A custom name identifying the keyframe list.
A starting offset of 0%.
An ending offset of 100%.
The percentage of time the specified keyframe should appear in the animation sequence.

We use cookies to improve your experience. Learn more in our Privacy policy.

×