@keyframes. В CSS есть функция, которая позволяет задать всю форму движения одной строкой — с ускорениями, паузами, рывками и перелётами.В свежем выпуске «CSS Боль» разбираем функцию
linear() в animation-timing-function и показываем, как с её помощью управлять прогрессом анимации точнее, чем привычными ease и cubic-bezier().➿➿➿➿➿➿➿➿➿➿➿➿
В выпуске:
✓ Как работает
linear() и почему это не просто «линейная» анимация✓ Что такое точки прогресса и как они выходят за диапазон 0–1
✓ Как делать паузы, отскоки и overshoot без сложных
@keyframes✓ Почему отрицательные значения — это часть спецификации, а не баг
✓ Как одной тайминг-функцией синхронизировать несколько анимаций
✓ Разбор спецификации CSS Easing Functions Level 2 и практические примеры
Меньше кода, больше контроля над движением — и анимации, которые наконец перестают быть болью.
🐭 Смотреть на YouTube
🐹 Смотреть в VK