В предыдущем задании обсуждалось ключевое слово 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, что делает изменения анимации медленнее по сравнению с продолжительность анимации.

```yml tests: - text: 'Значение свойства animation-timing-function элемента с red id должно быть функцией cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0,58, 1.' testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");' - text: Элемент с red идентификатором должен больше не обладать свойством animation-timing-function линейным. testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id red should no longer have the animation-timing-function property of linear.");' - text: Значение свойства animation-timing-function для элемента с blue не должно изменяться. testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id blue should not change.");' ```