Color Mixing With Animation Composition

CSS Color Mixed Animation: Explore the Charm of animation-composition

With the increasingly popular function, CSS color mixing has become quite simple. Just pass in two color values ​​(any color value) and optionally set the scale. color-mix()

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

We can also use the relative color syntax to manipulate colors between different color spaces and modify them. The main use case is to add transparency to color values ​​(such as named colors) that do not support transparency.

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%) */

Of course, we can also use some "hack" methods, such as superimposing two opaque elements. Or use

to achieve similar effects. mix-blend-mode

Another approach stems from recent updates to Almanac animation properties by Ryan. As we all know,

is the abbreviation for many other properties (the order is always hard for me to remember). One of the properties is animation, which functions as Ryan explains: animation-composition

The definition of the CSS attribute also sets the "base" value of the attribute. By default, keyframe animations ignore the underlying values ​​because they only consider the effect values ​​defined in the animation. Keyframes create an effect value stack that determines the order in which animations are presented to the browser. Composite operations are the way CSS processes the combination of basic effects and keyframe effect values.

Manuel Matuzović and Robin Rendle also have wonderful explanations for the property, which prompted us to update Almanac.

Supports three values ​​to replace the base attribute value, or to perform overlay or accumulation operations on the base attribute value. Among them, the "add" value is most interesting because it can: animation-composition

[Combines the effect value of the keyframe with the base

attribute value to create a new color. background-color

Let's take an example:

As you can see, the "add" value mixes them when transitioning between the two colors. Note that this transition is much smoother than the "replace" value, although what you end up getting at the 100% mark is a completely new color, not the one we declare in the keyframe. If we pause the animation at any point, can we extract new color values ​​from it?

Ryan designed this animation, and hovering over an element will pause the animation. If we open DevTools and force the

pseudo-class, maybe we can get the new color value in the "Computed" tab. :hover

Interestingly, we got some RGB conversions. This is probably because updating the color channel is easier than converting one hex color to another? Browsers do something smart.

I want to update my old color interpolation demo now...

Well, it doesn't look different in my opinion. Maybe it's just because we changed the hue channel of the HSL, and the changes are very subtle. Anyway,

can generate new calculated color values. What do you need these values ​​to do? I don't know, but use your imagination to the fullest! animation-composition

The above is the detailed content of Color Mixing With Animation Composition. For more information, please follow other related articles on the PHP Chinese website!