Animation changing a HSL variable isn't working - css

Question

I'm trying to create a rainbow animation with CSS variables and HSL. I've got the following code, however in Chrome it just snaps between both states.
#keyframes rainbow {
from {
--accent-bright: hsl(0,87%,48%);
--accent-dark: hsl(0,94%,48%);
--accent-verydark: hsl(0,88%,33%);
}
to {
--accent-bright: hsl(359,87%,48%);
--accent-dark: hsl(359,94%,48%);
--accent-verydark: hsl(359,88%,33%);
}
}
.rainbow, .rainbow *, .rainbow > * {
animation-name: rainbow;
animation-duration: 3.6s;
animation-iteration-count: infinite;
}
[...]
#topBar {
height: 56px;
width:100vw;
position:fixed;
top:0;
background-image: linear-gradient(to right, var(--accent-bright),var(--accent-dark));
color: var(--text-onaccent);
}
If I change the hue in one of the keyframes to someething more noticible, you can see the gradient flipping.

Answer 1

The property background-image is not animatable
However... opacity is animatable.
This means that you can create an ::after pseudo-element, exactly overlapping your original element and animate the pseudo-element's opacity so that it fades into view.
Remember to apply pointer-events: none to the pseudo-element, so that, as far as interactivity goes, the pseudo-element remains entirely insubstantial.
Working Example:
N.B. I have introduced yellow to make the animation more visible.
.rainbow {
--accent-bright: hsl(0, 87%, 48%);
--accent-dark: hsl(0, 94%, 48%);
--accent-verydark: hsl(0, 88%, 33%);
position: relative;
width: 100px;
height: 100px;
background-image: linear-gradient(to right, var(--accent-bright), var(--accent-dark));
color: var(--text-onaccent);
}
.rainbow::after {
--accent-bright: hsl(359, 87%, 48%);
--accent-dark: yellow;
--accent-verydark: hsl(359, 88%, 33%);
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, var(--accent-bright), var(--accent-dark));
pointer-events: none;
animation: rainbow 3.6s infinite;
}
#keyframes rainbow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="rainbow"></div>