Свойство CSS `transition-timing-function`

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

Попробуйте

transition-timing-function: linear;

transition-timing-function: ease-in;

transition-timing-function: steps(6, end);

transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

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

Эта кривая ускорения задаётся с помощью одной <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.

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

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

Доступность

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

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

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

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

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>? )

<integer> = 
  <number-token>

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

Примеры

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

<div class="parent">
  <div class="ease">ease</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>

.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

.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);
}

Примеры пошаговых переходов

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>

.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

.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
• <easing-function>
• Модуль функций плавности CSS
• transition
• transition-property
• transition-duration
• transition-delay
• TransitionEvent