Animate the Unanimatable

#@propertyproperty

Use @property for smooth custom property animation.

Why it works: Aesthetic-Usability Effect — smooth, polished transitions read as higher quality and more usable.

live_demo

code

@property --grad-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #1d7f53;
}
@property --grad-b {
  syntax: "<color>";
  inherits: false;
  initial-value: #249565;
}

.gradient-snap {
  background: linear-gradient(135deg, #1d7f53, #2d9a6a);
  transition: background 0.8s;
}
.gradient-snap:hover {
  background: linear-gradient(135deg, #249565, #163325);
}

.gradient-smooth {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  transition: --grad-a 0.8s, --grad-b 0.8s;
}
.gradient-smooth:hover {
  --grad-a: #249565;
  --grad-b: #163325;
}