Используйте кривую Безье для перемещения графика
В предыдущем задании обсуждалось ключевое слово ease-out которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом ease-out (для синего элемента) и linear ключевым словом (для красного элемента). Подобные анимационные прогрессии к ease-out ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек p1 и p2 приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Помните, что все функции cubic-bezier начинаются с p0 at (0, 0) и заканчиваются p3 в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в p1 y значение 0, затем переходит в значение p2 y 1), чем она перемещается по оси X (0 для начала, затем 0 для p1 , до 0,58 для p2 ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.
Чтобы увидеть эффект этой кривой Безье в действии, измените animation-timing-function элемента с id red на функцию cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.