Color Mixing With Animation Composition

Mixing colors in CSS is pretty much a solved issue thanks to the newer version color-mix() function if it receives support. Pass two color values ​​- two color values ​​at all – and optionally specify the proportions.

background-color: color-mix(#000 30%, #fff 70%);

We also have relative color syntax, which allows colors to be manipulated from one color space to another and changed from there. The main use case is to add opacity to color values ​​that do not support it, such as named colors.

background-color: hsl(from black h s l); /* hsl(0 0% 0%) */
background-color: hsl(from black h s l / 50%); /* hsl(0 0% 0% / 50%) */

I suppose we can get hacky and overlay one opaque element onto another.

Same general idea maybe, but with mix-blend-mode?

I saw another detour to it this morning when I looked at the updates Ryan added The animation Property in the Almanac. Well, we all know that animation is an abbreviation for about a billion other properties (the order of which is always unclear to me). One of them is animation-composition and it’s used to… well, Ryan sums up the explanation:

Defining a property in CSS also determines what is considered underlying Value of the property. By default, keyframe animations ignore the underlying value because they only consider the effect values ​​defined in the animation. Keyframes create a stack of effect values ​​that determine the order in which the animation is rendered in the browser. Compound operations are the way CSS handles the underlying effect combined with the keyframe effect value.

Manuel Matuzovic And Robin Rendle I also have excellent ways of explaining the property, and the former prompted us to update the almanac.

OK! We have three values ​​that we support animation-composition To replace the underlying property value in favor of the effect value defined in keyframes, add to them, or accumulate to combine multiple values. The add Value is what’s interesting to us because… oh god, let’s just take it from Ryan:

[I]Instead of replacing an underlying asset background-color When you combine the property value with the keyframe’s effect value, the color type values ​​are combined, creating new colors.

Aha! The example looks like this:

Do you see that? The add The value mixes the two colors as one transitions into the other. Also notice how much smoother this transition is than that replace Value, although at the 100% mark we get a completely new color and not the color we declared in the keyframes. What if we stopped the animation at any point? Can we extract a new color value from this?

Ryan did this so that the animation pauses when you hover over the elements. If we crack DevTools and force that :hover pseudo for the element, maybe we can go to the Calculated tab to get the new color value.

Interestingly, we get some RGB conversions there. Probably because updating color channels is easier than converting one hexadecimal field to another? Browsers do smart things.

Now I want to update my old color interpolation demo…

Hmm, to my untrained eye it’s no different. Maybe this is just because we are changing the hue channel of the HSL and it is very subtle. Whatever the case may be, animation-composition can generate new calculated color values. What do you need it for and what would you do with it? I don’t know, but I’m going wild.