Registering a new property can make it animatable (if syntax type is animatable). It is defined in CSS Properties & Values API

My hope is that it will be doable in CSS, maybe with a new @property at-rule, as proposed by AmeliaBR on Houdini’s GitHub issues

Support: Chrome with flags (transition on custom properties)

#el {
  --color-stop: deeppink;
  background: linear-gradient(white, var(--color-stop))
  transition: --color-stop 1s;
}
#el:hover {
  --color-stop: deepskyblue;
}
CSS.registerProperty({
  name: '--color-stop',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})