mix() для интерполяции значения между двумя заданными./* * @param {<percentage>} --percentage Точка интерполяции* @param { <any> } --start-value Начальное значение* @param { <any> } --end-value Конечное значение*/mix( var(percentage) ; var(--start-value) ; var(--end-value) );Условно "взять промежуточный цвет между синим и красным, на 20% ближе к синему, чем к красному" будет выглядеть как
mix(20%, blue, red);Думаю, это будет удобно для остановок в промежуточных точках анимации.
Также, mix() не будет работать для неаминируемых свойств. Это удобно для реализации в браузерах, но как фунция будет вести себя с переменными, пока что не понятно.
Интересно, что в качестве разделителей аргументов использованы точки с запятыми. Это необычно. Причина: сами интерполиемые значения могут содержать в себе запятые, например какие-то сложные фоны.
Решение не конечное, есть предложения сделать вложенные функции
mix(<percentage> from(<value>) to(<value>)) или даже дополнительные скобки mix(<percentage> , (<start-value>), (<end-value>)), в общем скорее всего это так не останется.Так же пока не ясно запретят ли инперполирование вне указанного диапазона с помощью отрицательного первого аргумента или больше 100%.
P.S. В твиттер мне справедливо напомнили, что:
"Не будет лишним напомнить, что всё то же самое можно сделать с помощью JS, установив вебпак и скачав всего лишь несколько библиотек с npmjs"
Спецификация туть.