#фишка дня

Тут оказалось, что в Chrome DevTools встроен редактор кривых Безье для переходов aka transition!

Можно добавить точку, перетащить её и сразу посмотреть результат. Ну или выбрать из готового набора: linear, elastic, bounce, emphasized.

А в версии 116 добавят линейные функции переходов, linear(), о которых нам ещё только предстоит поговорить: https://developer.chrome.com/articles/css-linear-easing-function/

#devtools #css #linear #curve

#статья дня

Кармен Ансио написал отличный материал про 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() — это вам не это.

Ссылка ещё раз: https://www.carmenansio.com/articles/spring-physics-css

#css #easing #spring #linear