Why does the following NOT animate smoothly even though --angle is used in a gradient, in a browser that supports @property?

.box { --angle: 0deg; background: linear-gradient(var(--angle), red, blue); transition: --angle 1s; } .box:hover { --angle: 180deg; }