Unified Color Animations

Easily animate the colors of a bunch of different stuff at the same time

Note: This is some bleeding edge shit. At the time of writing, this method does not work on Firefox. If you don't see the color changing your browser doesn't support this approach.
^{(lol get fucked people who value privacy)}

:root {
    --the-color: red;
    --the-animation: the-animation 10s infinite both;
}

First we define the default color on --the-color. You can use whatever color you like. This color will be used if the animation doesn't work ^{(rip ff users)}. Then we define the animation parameters on --the-animation. This basically says "run the animation the-animation for 10 seconds, infinite times." Don't worry about both. Here :root is where gobal css variables that will be used everywhere (like --the-color) should go.

@property --the-color {
    syntax: "<color>";
    inherits: false;
    initial-value: red;
}

Next, we define some extra properties on --the-color using @property. In particular, we set syntax to <color>, which is important for CSS to be able to do the color animation. Don't worry about inherits and set initial-value to the same color you used earlier.

@keyframes the-animation {
    0% {
        --the-color: red;
    }
    14.28% {
        --the-color: orange;
    }
    28.57% {
        --the-color: gold;
    }
    42.85% {
        --the-color: green;
    }
    57.14% {
        --the-color: blue;
    }
    71.42% {
        --the-color: indigo;
    }
    85.71% {
        --the-color: darkviolet;
    }
    100% {
        --the-color: red;
    }
}

Now for some fun. This is where we define the animation the-animation using @keyframes. In this example we're just looping through the colors of the rainbow (ROYGBIV), but you can do whatever you want. Use any colors you like and you can add or remove as many percentages between 0% and 100% as you want. The percentages have a precision up to two decimal points.

<style>
    /* all of the above styles */

    .color-text {
        color: var(--the-color);
        animation: var(--the-animation);
    }

    .color-background {
        background-color: var(--the-color);
        animation: var(--the-animation);
    }

    .white-text {
        color: white;
    }
</style>

<p class="color-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. In, aliquid.</p>
<p class="color-background white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, vero.</p>

Finally, we can use our new color variable to animate the colors of different things. Just use var(--the-color) anywhere you'd use a regular color then add animation: var(--the-animation); to whatever you're styling to make it actually animate. You can see the result of the above code example below.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. In, aliquid.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, vero.

And here's the full code example. Enjoy!

<style>
    :root {
        --the-color: red;
        --the-animation: the-animation 10s infinite both;
    }

    @property --the-color {
        syntax: "<color>";
        inherits: false;
        initial-value: red;
    }

    @keyframes the-animation {
        0% {
            --the-color: red;
        }
        14.28% {
            --the-color: orange;
        }
        28.57% {
            --the-color: gold;
        }
        42.85% {
            --the-color: green;
        }
        57.14% {
            --the-color: blue;
        }
        71.42% {
            --the-color: indigo;
        }
        85.71% {
            --the-color: darkviolet;
        }
        100% {
            --the-color: red;
        }
    }

    .color-text {
        color: var(--the-color);
        animation: var(--the-animation);
    }

    .color-background {
        background-color: var(--the-color);
        animation: var(--the-animation);
    }

    .white-text {
        color: white;
    }
</style>

<p class="color-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. In, aliquid.</p>
<p class="color-background white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, vero.</p>