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.


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

  to {
    transform: rotate(90deg);


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.