В предыдущем задании мы познакомились с ключевым словом ease-out, которое описывает изменение анимации, которое сначала ускоряется, а затем замедляется в конце анимации. Справа, в редакторе кода, демонстрируется разница между ключевым словом ease-out(для синего элемента) и ключевым словом linear (для красного элемента). Подобная последовательность анимации для ключевого слова easy-out может быть достигнута с помощью функции кубической кривой Безье.
В общем, изменение точек привязки p1 и p2 приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье, использующей значения для имитации ease-out стиля:
p{
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
Помните, что все функции cubic-bezier начинаются с p0 в (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 для элемента с идентификатором red на cubic-bezier со значениями x1, y1, x2, y2, установленными соответственно на 0, 0, 0.58, 1.
- Значение свойства animation-time-function элемента с идентификатором red должно быть cubic-bezier со значениями x1, y1, x2, y2, установленными соответственно на 0, 0, 0.58, 1.
- Значение свойства animation-time-function для элемента с идентификатором blue не должно изменяться.
