Was ist die Mathematik hinter css Übergänge auf Farben?

Question

Wenn ich diesen Code haben:

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

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

Wenn ich auf dem Element schweben die Farbe von Blau zu Rot über 10 Sekunden in einem reibungslosen Übergang zu ändern.

Wenn es eine Timeline war:

0 Seconds - Blau

5 Seconds -?

10 Sekunden - Red

Gibt es eine Möglichkeit der Berechnung, was die Farbe 5 Sekunden oder eine beliebige Anzahl von Sekunden im Übergang sein wird?

Answer 1

Das wird von keinem anderen als dem transition-timing-function property bestimmt, der entweder durch eine kubische Bezier-Kurve oder durch ein vordefiniertes Schlüsselwort entsprechend einer vordefinierten Kurve dargestellt wird. In Ihrem Beispiel ist der Wert dieser Eigenschaft linear, daher entspricht der Wert im 5-Sekunden-Intervall genau dem Durchschnitt der Start- und Endwerte.

Die Spezifikation definiert auch, wie interpolated values während Übergängen berechnet werden. Das ist, was es sagt über Farbwerte:

• Farbe: interpoliert über rot, grün, blau und Alpha-Komponenten (jeweils als Zahl zu behandeln, siehe unten). Die Interpolation erfolgt zwischen vormultiplizierten Farben (dh Farben, für die die angegebenen Rot-, Grün- und Blau-Komponenten mit dem Alpha multipliziert wurden).

Sie können den genauen Wert zu einem bestimmten Zeitpunkt während eines Übergangs erhalten, die unter Verwendung von window.getComputedStyle() und dergleichen im Gang ist. Von der introductory section:

Der berechnete Wert einer Eigenschaft wechselt im Laufe der Zeit vom alten Wert zum neuen Wert. Wenn ein Skript den berechneten Wert einer Eigenschaft (oder anderer Daten, die davon abhängen) abfragt, wenn sie übergeht, wird ein Zwischenwert angezeigt, der den aktuellen animierten Wert der Eigenschaft darstellt.