В этой задаче оживляется анимация элемента, имитирующая движения жонглирования мячом. Предыдущие задачи касались линейных функция и кривых Безье, но ни одна из них не отображает точно движения жонглирования. Вам нужно настроить кривую Безье.
Функция animation-timing-function автоматически зацикливается на каждом ключевом кадре, когда свойство animation-iteration-count установлено на infinite (бесконечность). Поскольку в середине продолжительности анимации (50%) установлено правило ключевых кадров(keyframe), это приводит к двум идентичным последовательностям анимации при движении мяча вверх и вниз.
Следующая кубическая кривая Безье имитирует жонглирование:
cubic-bezier(0.3, 0.4, 0.5, 1.6);
Обратите внимание, что значение Y2 больше 1. Хотя кубическая кривая Безье отображается в системе координат 1 на 1 и может принимать только значения x от 0 до 1, значение Y может быть больше единицы. В результате получается подпрыгивающее движение, которое идеально подходит для имитации жонглирования мячом.
Задание:
- Значение свойства animation-timer-function для элемента с идентификатором green должно быть функцией cubic-bezier со значениями 0.311, 0.441, 0.444, 1.649.
