Defining Animations in CSS With @keyframes

@keyframes is the at-rule to define one animation cycle in CSS. You simply provide values for animatable properties on a percentage-based timeline. The syntax it pretty straightforward:

@keyframes fancy {
  50% {
    transform: scale(1.4) rotate(80deg);
  }
  80% {
    transform: scale(1.2) rotate(40deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

In the above, we could have also defined 0% to transform: scale(1) rotate(0deg) to be more explicit, but when either the starting or ending time is not provided, the values are inferred.

You would call this animation with the different animation properties, or the animation shorthand:

.fancy-box {
  animation: fancy 1.5s ease-out infinite;
}

And here’s the result of our animation:

A Few Notes

  • Instead of 0%, you can use the from keyword.
  • Instead of 100%, you can use the to keyword.
  • Even if you use the from and to keywords, any values in between are still declared with a % value.
  • If two of the times have the same values, they can be under the same declaration: 45%, 77% {…}.
  • At least the starting or ending time, 0% or 100%, must be declared for the animation to be valid.
  • Declarations with the !important keyword are ignored.
  • If some un-animatable properties are provided, they will be ignored, but the animatable ones will still work.

Browser Support

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

✖ Clear

πŸ•΅ Search Results

πŸ”Ž Searching...