animation-timing-function

Общие сведения

Функции времени в CSS обычно относится к функциям плавности.

animation-timing-function принимает в качестве значения функцию времени, которая представляет собой математическую функцию определяющую скорость для анимированного объекта с течением времени. Значение также может быть указано с помощью нескольких предопределённых ключевых слов для общих функций времени.

Синтаксис свойства

• Синтаксис:

  animation-timing-function: <timing-function>

• Значение по умолчанию: ease
• Применяется: к псевдоэлементам ::before и ::after
• Наследуется: нет
• Анимируется: нет

Значения свойства

• <timing-function> - для полного списка всех возможных значений, детального объяснения каждого из них и примеров смотрите <timing-function>.

Поддержка браузерами

Примечание

Если вы указываете больше одной анимации для элемента, то можете указать несколько функций времени, каждая из которых будет соответствовать анимации через свойство animation-name.

Указанная функция времени применяется к каждой итерации анимации (циклу), а не ко всей анимации в целом. Например, если для анимации заданы animation-timing-function: ease-in-out; и animation-iteration-count: 2;, то это замедлит анимацию в начале в первой итерации и в конце первой итерации, потом опять замедлит её в начале второй итерации и в конце второй итерации.

Для анимаций с ключевыми кадрами, функция времени применяется между ключевыми кадрами, а не ко всей анимации. Другими словами, функция времени применяется в начале ключевого кадра и в конце ключевого кадра.

Свойство animation-timing-function обычно указывается как часть сокращённого свойства animation.

Пример