Animated CSS Custom Property

example.scss

// Static value by default:
// https://caniuse.com/css-variables
:root {
	--example: 0deg;
}
.myclass {
	background-image: linear-gradient( var(--example), red, green 50%, blue );
}

// Animated value where supported:
// https://caniuse.com/mdn-css_at-rules_property
@supports (background: paint(a)) {
	@property --example {
		syntax: "<angle>";
		initial-value: 0deg;
		inherits: false;
	}
	@keyframes spin {
		0% {
			--example: 0deg;
		}
		100% {
			--example: 360deg;
		}
	}
	.myclass {
		animation: spin 2.5s linear infinite;
	}
}