🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
#статья дня
Кармен Ансио написал отличный материал про CSS-функцию linear(). Она появилась уже довольно давно, но в реальных проектах встречается редко — большинство по привычке ограничивается ease, ease-in-out и разными вариантами cubic-bezier().
Причина понятна: обычно linear() воспринимают как способ вручную задать несколько точек на кривой анимации. Не самый удобный инструмент и не очень понятно, зачем он вообще нужен.
Ансио показывает гораздо более интересный сценарий. Если заранее рассчитать движение какой-нибудь физической системы — например, пружины — то результат можно представить как последовательность значений и скормить её linear(). Браузер потом просто воспроизведёт эту траекторию.
.card {
transition:
transform 647ms
linear(
0, 0.04, 0.15, 0.30,
0.46, 0.59, 0.69,
0.75, 0.79, 0.80
/* ... */
);
}
Автор начинает с модели затухающей пружины, показывает уравнение, объясняет параметры системы и сопровождает всё это интерактивными примерами. Можно менять коэффициенты и сразу видеть, как меняется движение.
В общем, если у вас есть модель движения и набор точек, CSS уже умеет её воспроизводить.
Короче, linear() — это вам не это.
Ссылка ещё раз: Ссылка скрыта
#css #easing #spring #linear