Свойство transition-timing-function в CSS – настоящий волшебник, который управляет тем, как плавно и динамично меняются стили элементов. Оно описывает, каким образом вычисляются промежуточные значения выбранного свойства, создавая эффект «мягкого начала», затем ускорения и снова замедления к концу. Для формирования кривой скорости используется математическая функция – кубический Безье. Вы можете задать собственные параметры этой функции или воспользоваться удобными ключевыми словами, которые уже предопределены в языке. Свойство допускает перечисление нескольких значений через запятую. Каждое новое значение применяется к соответствующему свойству согласно порядку, определённому в transition-property. Если список коротче количества свойств, то значения повторяются; если длиннее – лишние обрезаются. | Значение по умолчанию: | ease | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.transitionTimingFunction="linear" | | Значение | Описание | | ease | Переход начинается медленно, слегка ускоряется и снова замедляется к завершению. Эквивалентно cubic-bezier(0.25, 0.1, 0.25, 1). | | linear | Анимация проходит с постоянной скоростью от начала до конца – ровно как в прямой линии. Эквивалентно cubic-bezier(0, 0, 1, 1). | | ease-in | Переход начинается медленно и постепенно ускоряется к концу. Аналогично cubic-bezier(0.42, 0, 1, 1). | | ease-out | Сначала быстрая смена, а затем плавное замедление к завершению. Эквивалентно cubic-bezier(0, 0, 0.58, 1). | | ease-in-out | Мягкое начало и плавное окончание – идеальное сочетание для естественных переходов. Эквивалентно cubic-bezier(0.42, 0, 0.58, 1). | | step-start | Анимация мгновенная: свойства сразу принимают конечное значение без плавного перехода. В этом случае продолжительность игнорируется. | | step-end | Свойства остаются в исходном состоянии, пока не истечёт заданная длительность, после чего мгновенно переключаются на конечное значение. Продолжительность действует как задержка. | | steps(n, указание) | «Лестничный» переход из n равных шагов. Первый аргумент – целое положительное число, определяющее количество ступеней; второй (необязательный) может быть «start» или «end». Если указан «start», последний шаг завершится к концу длительности; если «end», он произойдёт после её окончания. По умолчанию используется «end». | | cubic-bezier(n, n, n, n) | Набор четырёх чисел с плавающей точкой, задающий кривую ускорения вручную. Позволяет точно настроить динамику перехода. |
|