функция-распределения-времени-анимации

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство animation-timing-function CSS определяет, как анимация проходит через длительность каждого цикла.

Попробовать

Зачастую удобно использовать сокращённое свойство animation для одновременной настройки всех свойств анимации.

Синтаксис

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* cubic-bezier() function values */
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); /* ease-in */
animation-timing-function: cubic-bezier(0, 0, 0.58, 1); /* ease-out */
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */

/* linear() function values */
animation-timing-function: linear(0, 0.25, 1);
animation-timing-function: linear(0 0%, 0.25 50%, 1 100%);
animation-timing-function: linear(0, 0.25 50% 75%, 1);
animation-timing-function: linear(0, 0.25 50%, 0.25 75%, 1);

/* steps() function values */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

Значения

<easing-function>

Функция плавного изменения, соответствующая заданной анимации, как определено animation-name.

Значения без ключевого слова step (ease, linear, ease-in-out, и т.д.) представляют собой кубические кривые Безье с фиксированными значениями четырёх точек, в то время как значение функции cubic-bezier() позволяет указать значения, не определённые заранее. Функция плавного изменения steps() делит входное время на указанное количество равных интервалов. Её параметры включают количество шагов и положение шага.

linear

Равна cubic-bezier(0.0, 0.0, 1.0, 1.0), анимация выполняется с равномерной скоростью.

ease

Равна cubic-bezier(0.25, 0.1, 0.25, 1.0), значение по умолчанию, увеличивает скорость к середине анимации, а затем замедляет её в конце.

ease-in

Равна cubic-bezier(0.42, 0, 1.0, 1.0), начинается медленно, а скорость перехода анимированного свойства увеличивается до завершения.

ease-out

Равна cubic-bezier(0, 0, 0.58, 1.0), начинается быстро, а затем анимация замедляется.

ease-in-out

Равна cubic-bezier(0.42, 0, 0.58, 1.0), анимированные свойства медленно переходят, ускоряются, а затем снова замедляются.

cubic-bezier(<number [0,1]> , <number> , <number [0,1]> , <number>)

Определённая пользователем кубическая кривая Безье, где первые и третьи значения должны быть в диапазоне от 0 до 1.

linear(<number> <percentage>{1,2}, …)

Функция выполняет линейную интерполяцию между заданными точками плавного изменения. Точка плавного изменения — это пара выходного прогресса и входного процента. Входной процент необязателен и определяется, если не указан. Если входной процент не указан, то первая и последняя точки плавного изменения устанавливаются соответственно в 0% и 100%, а точки плавного изменения посередине получают процентные значения, вычисленные путём линейной интерполяции между ближайшими предыдущей и следующей точками, имеющими процентное значение.

steps(<integer>, <step-position>)

Отображает итерацию анимации по n точкам перехода вдоль перехода, отображая каждую точку в течение равного времени. Например, если n равно 5, то есть 5 шагов. Зависит от используемого значения step position, останавливается ли анимация на 0%, 20%, 40%, 60% и 80% на 20%, 40%, 60%, 80% и 100%, или делает 5 остановок между 0% и 100% вдоль анимации, или делает 5 остановок, включая метки 0% и 100% (на 0%, 25%, 50%, 75% и 100%):

jump-start: Обозначает левонепрерывную функцию, так что первый скачок происходит при начале анимации.
jump-end: Обозначает правонепрерывную функцию, так что последний скачок происходит по окончании анимации. Это значение по умолчанию.
jump-none: Скачка нет ни в начале, ни в конце, что фактически удаляет шаг во время итерации интерполяции. Вместо этого он останавливается как на отметке 0%, так и на отметке 100%, каждая на 1/n от длительности.
jump-both: Включает паузы как на отметке 0%, так и на отметке 100%, фактически добавляя шаг во время итерации анимации.
start: То же, что и jump-start.
end: То же, что и jump-end.

step-start

Равно steps(1, jump-start)

step-end

Равно steps(1, jump-end)

Примечание: При указании нескольких значений, разделённых запятыми, для свойства animation-*, они применяются к анимациям в том порядке, в котором появляются animation-name. Для ситуаций, когда количество анимаций и значений свойства animation-* не совпадают, см. Настройка нескольких значений свойств анимации.

Примечание: animation-timing-function оказывает такое же влияние при создании анимаций прокрутки CSS, как и при обычных основанных на времени анимациях.

Описание

Функции плавного изменения могут быть указаны для отдельных ключевых кадров в правиле @keyframes. Если для ключевого кадра не указано значение animation-timing-function, используется соответствующее значение animation-timing-function из элемента, к которому применяется анимация.

Внутри ключевого кадра animation-timing-function — это описатель, специфичный для правила @keyframes, а не свойство с таким же именем. Время не анимируется. Скорее, функция плавного изменения ключевого кадра применяется к каждому свойству в отдельности от ключевого кадра, в котором оно указано, до следующего ключевого кадра, в котором указано это свойство, или до конца анимации, если нет последующего ключевого кадра, в котором указано это свойство. В результате animation-timing-function в ключевых кадрах 100% или to никогда не используется.

Формальное определение

Начальное значение	`ease`
Применяется к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

Формальный синтаксис

animation-timing-function = 
  <easing-function>#  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

Примеры

Все примеры в этом разделе анимируют свойства width и background-color нескольких элементов <div> с разными значениями animation-timing-function. Ширина анимируется от 0 до 100%, а цвет фона — от зеленовато-жёлтого до пурпурно-красного.

Примеры линейных функций

Пример демонстрирует действие различных значений функции плавного изменения linear().

На следующем изображении показаны графики всех значений функции плавного изменения linear() используемых в этом примере. На оси x откладывается входной прогресс (время), а на оси y — выходной прогресс. Согласно синтаксису, входной прогресс изменяется от 0 до 100%, а выходной — от 0 до 1.

An image showing 'linear' function graphs

Обратите внимание, что выходное значение может увеличиваться или уменьшаться.

Примеры кубических кривых Безье

Пример демонстрирует действие различных функций плавного изменения с использованием кривых Безье.

На следующем изображении показаны графики всех значений функции плавного изменения кубической кривой Безье, используемых в этом примере. Входной прогресс (время) изменяется от 0 до 1, а выходной прогресс — от 0 до 1.

An image showing 'cubic-bezier' function graphs

END_OF_DOCUMENT_MARKER

Примеры ступенчатых функций

Этот пример демонстрирует эффекты нескольких значений ступенчатых функций плавного изменения.

На следующем изображении показаны графики всех значений step() функций, используемых в этом примере. Входной прогресс (время) и выходной прогресс варьируются от 0 до 1.

image showing 'steps' function graphs

Спецификации

Спецификация
CSS Анимации Уровень 1 # animation-timing-function
CSS Функции плавного изменения Уровень 1 # linear-easing-function-parsin

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`animation-timing-function`	433	1212	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	93.2	4.01.0	434.4
`jump`	77	79	65	64	14	77	65	55	14	12.0	77

См. также

Использование CSS-анимаций
<easing-function>
JavaScript AnimationEvent API
Инструмент генерации кубических Bézier
Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function