Smart Variables

Previously, CSS variables (Custom Properties) couldn't be animated smoothly. If you changed --color from blue to red, there was no animation. With @property this is possible.

How to Register a Variable:

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.box {
  background: conic-gradient(red var(--angle), blue);
  transition: --angle 1s;
}

.box:hover {
  --angle: 360deg; /* Now gradient will rotate smoothly! */
}