transition-timing-function

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

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

Свойство transition-timing-function CSS задаёт, как рассчитываются промежуточные значения для свойств CSS, на которые влияет эффект перехода.

Попробовать

По сути, это позволяет задать кривую ускорения, чтобы скорость перехода могла изменяться в течение его продолжительности.

Эта кривая ускорения определяется с помощью одной <easing-function> для каждого свойства, которое должно переходить.

Можно указать несколько функций сглаживания; каждая из них будет применена к соответствующему свойству, как указано в свойстве transition-property, которое действует как transition-property список. Если указано меньше функций сглаживания, чем в transition-property списке, пользовательский агент должен рассчитать, какое значение использовать, повторяя список значений до тех пор, пока для каждого свойства перехода не будет значения. Если функций сглаживания больше, список усекается до нужного размера. В обоих случаях объявление CSS остаётся валидным.

Синтаксис

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

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple easing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

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

Значения

<easing-function>

Каждая <easing-function> представляет функцию сглаживания, которая связывается с соответствующим свойством для перехода, как определено в transition-property.

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

ease

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

linear

Равно cubic-bezier(0.0, 0.0, 1.0, 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(p1, p2, p3, p4)

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

steps(n, <jump-term>)

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

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)

Доступность

Некоторые анимации могут быть полезны, например, чтобы направить пользователей к пониманию ожидаемых действий, показать взаимосвязи в пользовательском интерфейсе и проинформировать пользователей о произошедших действиях. Анимации могут помочь снизить когнитивную нагрузку, предотвратить слепоту к изменениям и улучшить запоминание пространственных отношений. Однако некоторые анимации могут быть проблематичны для людей с когнитивными проблемами, такими как синдром дефицита внимания и гиперактивности (СДВГ), и определенные виды движений могут быть триггером для вестибулярных нарушений, эпилепсии, мигрени и светочувствительности.

Рассмотрите возможность предоставления механизма для приостановки или отключения анимации, а также использование запроса к среде с уменьшенным движением (или эквивалентного пользовательского агента Sec-CH-Prefers-Reduced-Motion), чтобы создать дополнительный опыт для пользователей, которые выразили предпочтение меньшей анимации.

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

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

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

transition-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

Примеры

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

.ease {
  transition-timing-function: ease;
}
.ease-in {
  transition-timing-function: ease-in;
}
.ease-out {
  transition-timing-function: ease-out;
}
.ease-in-out {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

Примеры step

.jump-start {
  transition-timing-function: steps(5, jump-start);
}
.jump-end {
  transition-timing-function: steps(5, jump-end);
}
.jump-none {
  transition-timing-function: steps(5, jump-none);
}
.jump-both {
  transition-timing-function: steps(5, jump-both);
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}

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

Спецификация
CSS Переходы # transition-timing-function-property

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

	Рабочие столы					Мобильные телефоны
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`transition-timing-function`	261	1212	16494–preview	12.11511.6–15	93.1	2618	16494	12.11412–14	92	1.51.0	4.44.4
`jump`	77	79	65	64	14	77	65	55	14	12.0	77

END_OF_DOCUMENT_MARKER

См. также

© 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/transition-timing-function