Motion

Registered custom properties

Newly availablesince Jul 2024

Replaces: Gradients and custom properties that snap instead of animating. A typed property can be interpolated, so a gradient angle or a hue can transition.

See it working

Hover

The syntax

@property --angle {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.ring { background: conic-gradient(from var(--angle), …);
        transition: --angle .8s; }

The demo’s full CSS

@property --dm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dm-prop { display: grid; place-items: center; min-height: 150px; }
.dm-prop-ring { --dm-angle: 0deg; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #0a0a0f;
  background: radial-gradient(#fff 58%, transparent 59%), conic-gradient(from var(--dm-angle), #4f46e5, #0ea5e9, #f05a28, #4f46e5);
  transition: --dm-angle .9s ease; cursor: pointer; }
.dm-prop-ring:hover { --dm-angle: 300deg; }

For browsers without it

Without @property the variable is just a string, so the gradient snaps to its new angle on hover instead of sweeping. Same end state, no motion.