Exploring @property and Its Animating Powers

This is a translation of the CSS‑Tricks article "Exploring @property and its Animating Powers". It introduces CSS custom properties (variables) and shows why they cannot be animated directly, then presents the new @property rule that gives browsers type information, initial values, and inheritance control for custom properties.

With @property you can declare a custom property’s syntax , initial-value , and whether it inherits . Example:

@property --property-name {
  syntax: '
';
  initial-value: #c0ffee;
  inherits: false;
}

Because @property is still a Working Draft, browser support is limited to Chrome and Edge (via flag). Once supported, it unlocks true type checking for custom properties, allowing smooth animation of values such as colors, lengths, angles, numbers, and more.

Examples of type‑checked custom properties:

@property --spinAngle {
  /* initial value */
  initial-value: 0deg;
  /* inheritance */
  inherits: false;
  /* type */
  syntax: '
';
}

@keyframes spin {
  to { --spinAngle: 360deg; }
}

The article demonstrates several creative uses:

Animating a rainbow of colors by defining --hue as a <number> and using keyframes to step through hue values.

Creating a pure‑CSS stopwatch by animating an integer custom property with @property --milliseconds { syntax: ' '; initial-value: 0; inherits: false; } and a counter .

Animating gradient color stops using a numeric --wave property to drive multiple layered linear gradients, producing a realistic wave effect.

Driving border‑image animations (e.g., a charging indicator) by animating both an angle and a hue property.

Animating complex transforms (position, rotation) by defining separate custom properties for --x , --y , and --rotate , then composing them in transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--rotate)); .

These examples show how @property enables fine‑grained control over numeric values, making CSS animations more expressive without JavaScript.

Finally, the article combines several techniques to build a full‑scene 404 page where two swing variables ( --swing-x and --swing-y ) drive text lighting, shadows, and a moving mask, illustrating the power of variable‑driven design.

Original source: CSS‑Tricks