- Теория
- Теория
animation-timing-function, шаг 3
Что же скрывается за названиями linear
, ease
и других функций? Довольно сложная математика кубических кривых Безье.
По сути, именованные функции ease-in
, ease-out
и другие являются псевдонимами для универсального описания кривых, например:
cubic-bezier(0, 0, 1, 1) // это linear cubic-bezier(0.42, 0, 1, 1) // это ease-in
В общем представлении cubic-bezier(x1, y1, x2, y2)
значения x
и y
— это координаты точек кривых на графике. При этом верным считается значение x
только в диапазоне от 0
до 1
.
Существует отличный сервис, помогающий разобраться в функциональном представлении кривых Безье без необходимости штудировать учебники по математике.
А вот по этой ссылке можно найти целую коллекцию разных easing-функций на основе кривых Безье.
C помощью кривых Безье мы можем задавать любые формы анимации. Давайте попробуем!
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.