CSS颜色混合动画：探索animation-composition的魅力
借助日益普及的color-mix()函数，CSS颜色混合已变得相当简单。只需传入两个颜色值（任何颜色值），并可选地设置比例即可。
background-color: color-mix(#000 30%, #fff 70%);
我们还可以使用相对颜色语法，在不同的颜色空间之间操作颜色，并对其进行修改。最主要的用例是为不支持透明度的颜色值（例如命名颜色）添加透明度。
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%) */
当然，我们也可以采用一些“hack”方法，例如叠加两个不透明元素。或者使用mix-blend-mode实现类似效果。
另一种方法源于最近Ryan对Almanac动画属性的更新。众所周知，animation是许多其他属性的简写（其顺序总是让我难以记住）。其中一个属性是animation-composition，其作用正如Ryan所解释的：
CSS属性的定义也同时设定了该属性的“基础”值。默认情况下，关键帧动画会忽略基础值，因为它们只考虑动画中定义的效果值。关键帧创建了一个效果值堆栈，它决定了动画呈现给浏览器的顺序。复合操作是CSS处理基础效果与关键帧效果值组合的方式。
Manuel Matuzović和Robin Rendle也对该属性有精彩的解释，前者的解释促使我们更新了Almanac。
animation-composition支持三个值，用于替换基础属性值，或在基础属性值上进行叠加或累加操作。其中，“add”值最令人感兴趣，因为它可以：
[将]关键帧的效果值与基础
background-color属性值组合，从而创建新的颜色。
让我们来看一个例子：
正如你所看到的，“add”值在两种颜色之间过渡时会将它们混合。注意，与“replace”值相比，这种过渡要平滑得多，尽管最终在100%标记处得到的是一种全新的颜色，而不是我们在关键帧中声明的颜色。如果我们在任意点暂停动画，能否从中提取新的颜色值呢？
Ryan设计了这个动画，鼠标悬停在元素上会暂停动画。如果我们打开DevTools并强制使用:hover伪类，也许可以在“Computed”选项卡中获取新的颜色值。
有趣的是，我们得到了一些RGB转换。这可能是因为更新颜色通道比将一个十六进制颜色转换为另一个十六进制颜色更容易？浏览器确实会做一些智能的事情。
我现在想更新我旧的颜色插值演示……
嗯，在我看来没什么不同。也许这只是因为我们改变了HSL的色相通道，而且变化非常细微。无论如何，animation-composition可以生成新的计算颜色值。你需要这些值来做什么？我不知道，但尽情发挥你的想象力吧！
以上是与动画构成颜色混合的详细内容。更多信息请关注PHP中文网其他相关文章！
