與動畫構成顏色混合

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中文網其他相關文章！