Have you every tried to animate a CSS custom variable and ended up getting this result:

Well then I got Good news for you there is a way to animate CSS Custom Properties!
It can be done with the CSS @property.
I will show you how to use it with a simple example.

CSS WAY

1) Declare it(Its pretty hard but you will get he hang of it):

@property --c {  syntax: '<color>';  inherits: false;  initial-value: #f00;}

2) Use it in a property and add css animation property:

div {  /*Some Styles*/  background: var(--c);  animation: c 2s ease infinite alternate;}

3) Now create an animation with it:

@keyframes c { to { --c: pink } }

End Result:

JS Way

The CSS and JS way are pretty much the same except you declare the @property in JS instead of CSS.
How you Declare it in JS:

window.CSS.registerProperty({  name: '--c',  syntax: '<color>',  inherits: true,  initialValue: 'red'})

Example of the JS way:

That's it, Thanks for reading!