Что такое интерполяция в CSS, где она используется и для чего нужна?

Что проверяют

Слово «интерполяция» в вебе значит две разные вещи, и сильный ответ начинается с уточнения, о какой речь. Проверяют, понимаете ли вы, как браузер вычисляет промежуточные значения, и отличаете ли это от подстановки в препроцессоре.

Как отвечать

Основное значение для самого CSS это вычисление промежуточных состояний между двумя значениями. На нём держатся переходы и покадровые анимации. Браузер интерполирует не текст, а типизированные значения: числа и длины покомпонентно, цвета в цветовом пространстве, трансформации по совпадающим функциям списка. Типы без промежуточных состояний переключаются скачком в середине.

Практические следствия:

• пользовательские свойства без объявления считаются дискретными, и значение прыгает; чтобы --x менялось плавно, его тип объявляют через @property с указанием синтаксиса;
• списки трансформаций должны совпадать по составу функций, иначе браузер переходит к матричной интерполяции и вращение выглядит неожиданно;
• появление и исчезновение элемента через display требует transition-behavior: allow-discrete и стартового правила @starting-style.

@property --card-glow {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

Второе значение слова относится к препроцессорам: конструкция вида решётка с фигурными скобками в Sass подставляет значение туда, где var() не работает, то есть в имя селектора, имя свойства или условие медиазапроса.

Где спотыкаются

Пытаются анимировать пользовательское свойство и не понимают, почему вместо плавности получается щелчок на середине. Без объявленного типа браузер не знает, что это цвет или длина, и интерполировать ему нечего.

Анимируют высоту от нуля до автоматической и ждут плавности. Ключевое слово это не число, промежуточных значений между ними нет. Обходят через ограничение высоты, размеры строк сетки или современные средства, разрешающие интерполяцию ключевых слов.

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