Любимая новинка CSS-анимаций | CSS Боль

Сложные анимации в CSS обычно выглядят красиво только до тех пор, пока вам не нужно их реализовать. Десятки @keyframes, ручные расчёты ускорений, замедлений и пульсаций — всё это быстро превращается в боль. В этом выпуске разбираем фичу, которая радикально упрощает жизнь: функцию linear() в animation-timing-function. Она позволяет описывать сложную форму анимации одной функцией — без батарей ключевых кадров. В этом выпуске: - Почему составные анимации с пульсациями и рывками почти невозможно удобно поддерживать через @keyframes. - Как работает функция linear() и чем она отличается от привычного linear. - Что такое шаги прогресса анимации и как они могут возрастать, уменьшаться и выходить за диапазон 0–1. - Как привязывать изменения прогресса к конкретным моментам времени с помощью процентов. - Почему отрицательные значения и overshoot — это не баг, а фича. - Как делать паузы, отскоки, перелёты и «пружинки» без дополнительных кадров. - Пример генерации сложной тайминг-функции с помощью ChatGPT и готовых генераторов. - Практика: синхронизация нескольких анимаций одной функцией linear(). - Бонус: эффект голографического свечения с radial-gradient, mix-blend-mode и анимацией CSS-переменной. - Разбор спецификации CSS Easing Functions Level 2 и нюансов синтаксиса linear(). В итоге — сложные, выразительные анимации, которые описываются простыми @keyframes и одной тайминг-функцией. Меньше кода, меньше боли и больше контроля. Таймкоды: 00:00 Введение в тему 01:00 Начало...