?️ CSS `@property`

? Quick Overview

The @property at-rule lets you define custom properties (CSS variables) with a specific data type, an initial value, and inheritance behavior. This makes those variables fully animatable and transition-friendly, just like built-in CSS properties.

Use it when you want smooth animations based on CSS variables such as angles, lengths, numbers, or colors.

? Key Concepts

Custom properties with types: Declare the expected data type using the syntax descriptor.
Initial value: Provide a default using initial-value so the property always has a valid value.
Inheritance: Control whether the custom property is inherited using inherits.
Animatable variables: Once declared with @property, the custom property can be used in transitions and keyframes.

⭐ Great for smooth, variable-driven UI animations

? Syntax of `@property`

A basic @property rule describes one custom property and how it behaves. You typically place it in your global CSS (not inside a selector).

? View Syntax Example

/* Define a typed, animatable custom property */
@property --variable-name {
  syntax: '<data-type>';
  inherits: true | false;
  initial-value: value;
}

? Explanation

--variable-name – the name of your custom property (must start with --).
syntax – defines the value type, e.g. '<angle>', '<length>', '<number>'.
inherits – whether child elements inherit this property from their parent.
initial-value – the default value used when no other value is set.

? Example 1: Animate a Rotation Angle

Here we declare an --angle property and use it to rotate a box. Thanks to @property, we can apply a smooth transition to --angle.

? View Code Example

/* Rotate a box using an animatable custom angle variable */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.box {
  --angle: 0deg;
  transform: rotate(var(--angle));
  transition: --angle 1s ease-in-out;
}

.box:hover {
  --angle: 45deg;
}

Hovering the box changes --angle from 0deg to 45deg, and the element rotates smoothly because the custom property is declared as an <angle> and used in a transition.

?️ Example 2: Hover Hue Animation

This demo uses a numeric custom property --bg-hue to animate the background color in HSL space.

? View Code Example

/* Animate background hue using a numeric custom property */
@property --bg-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 200;
}

.color-box {
  --bg-hue: 200;
  background-color: hsl(var(--bg-hue), 80%, 60%);
  width: 100px;
  height: 100px;
  transition: --bg-hue 0.5s ease;
}

.color-box:hover {
  --bg-hue: 300;
}

On hover, --bg-hue changes from 200 to 300. Because the property is declared with syntax: '<number>' and used in a transition, the hue shifts smoothly between the two values.

? Browser Compatibility

At the moment, @property is supported in Chromium-based browsers such as Chrome, Edge, and Opera. Firefox and Safari do not support it yet, so always test your animations and provide sensible fallbacks.

? Tips & Best Practices

Use @property when you want to animate CSS variables using transition or keyframes.
Always provide all three descriptors: syntax, inherits, and initial-value.
Match syntax to real CSS types like '<angle>', '<length>', or '<number>'.
Test behavior in unsupported browsers and make sure your layout still looks acceptable without the animation.
Keep property names descriptive, e.g. --rotation-angle, --card-scale, --bg-hue.

? Try It Yourself / Practice Tasks

Create a --rotation property using @property and animate it on hover for a card or button.
Build a color box whose background hue shifts using a numeric variable and hsl(), similar to the example above.
Define a --size variable (using <length>) to control width and animate it on click.
Remove the @property declaration and observe how the same transitions stop working on the variables.
Try defining a spacing variable such as --gap-size with <length> and animate the gap or padding.

CSS @property

?️ CSS @property