animation

A shorthand property that applies an animation to an element. It links the element to a set of @keyframes and defines how that animation should behave.

It is documented as part of the CSS Animations specification.

/* Usage Example */
.loader {
  animation: spin 1s linear infinite;
}
@keyframes spin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}

/* Global values */
animation: inherit;
animation: initial;
animation: revert;
animation: revert-layer;
animation: unset;
Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

43+
16+
9+
12+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC