css轉換顏色背後的數學是什麼？

Question

如果我有這樣的代碼：

.box { 
    color: #3399FF /* Blue */ 
    transition: 10s all linear; 
} 

.box:hover { 
    color: #FF3300 /* Red */ 
} 

如果我懸停元素的顏色將從藍中的平滑過渡變爲紅色超過10秒。

如果有一個時間表：

0秒 - 藍

5秒 - ？

10秒 - 紅

是否有什麼計算的顏色爲5秒或在過渡任何秒數的一種方式？

Answer 1

這是由transition-timing-function property決定的，它由三次貝塞爾曲線或與預定義曲線對應的預定義關鍵字表示。在示例中，該屬性的值是linear，所以在5秒的時間間隔的值將是開始和結束值的完全平均值。

該規範還定義了interpolated values如何過渡期間計算。這是怎麼說的顏色值：

• 顏色：通過紅，綠，藍和alpha分量插值（每一個爲數字，見下文）。插值是在預乘顏色之間完成的（也就是說，指定的紅色，綠色和藍色分量已經乘以alpha的顏色）。

可以使用window.getComputedStyle()等，其目前進行中的過渡期間獲得在任何給定時間點的精確值。來自introductory section：

屬性的計算值隨時間從舊值轉換爲新值。因此，如果一個腳本查詢一個屬性（或取決於它的其他數據），因爲它正在轉換的計算值，它會看到，表示屬性的當前值動畫的中間值。