Какова математика за переходы 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 во время переходов. Это то, что он говорит о цветовых значений:

• цвет: интерполированное с помощью красного, зеленого, синего и альфа-компоненты (лечение каждого как число, см. Ниже) Интерполяция выполняется между предварительно умноженными цветами (то есть цветами, для которых указанные красные, зеленые и синие компоненты были умножены на альфа).

Вы можете получить точное значение в любой момент времени во время перехода, которая находится в ходе использования window.getComputedStyle() и тому подобное. От introductory section:

Вычисленное значение свойства переходит со временем от старого значения к новому. Поэтому, если скрипт запрашивает вычисленное значение свойства (или других данных в зависимости от него) по мере его перехода, он увидит промежуточное значение, которое представляет текущее анимированное значение свойства.