CSS-свойство `animation-timing-function`

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

Часто удобно использовать сокращённое свойство animation, чтобы задать сразу все свойства анимации.

Попробуйте

animation-timing-function: linear;

animation-timing-function: ease-in-out;

animation-timing-function: steps(5, end);

animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Синтаксис

/* 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.

Неступенчатые ключевые слова (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 шагов. Будет ли анимация временно задерживаться на отметках 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)

Описание

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

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

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

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

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

<integer> = 
  <number-token>

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

Примеры

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

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

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

<div class="parent">
  <div class="linear">'linear' value</div>
  <div class="linear-fn1">linear(0, 0.5 50%, 1)</div>
  <div class="linear-fn2">linear(0, 0.25 75%, 1)</div>
  <div class="linear-fn3">linear(0, 0.75 25%, 1)</div>
  <div class="linear-fn4">linear(0, 0.5 25% 75%, 1)</div>
  <div class="linear-fn5">linear(0, 0.25 45%, 0.75 55%, 0.5 70%, 1)</div>
  <div class="linear-fn6">linear(0, 1.2 50%, 0.75 80%, 1)</div>
  <div class="linear-fn7">linear(0, 0.5 75%, 1 120%)</div>
</div>
<div class="x-axis"><span>25%</span><span>50%</span><span>75%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 24.8%,
    grey 24.8%,
    grey 25.2%,
    white 25.2%,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%,
    white 74.8%,
    grey 74.8%,
    grey 75.2%,
    white 75.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}
.linear-fn1 {
  animation-timing-function: linear(0, 0.5 50%, 1);
}
.linear-fn2 {
  animation-timing-function: linear(0, 0.25 75%, 1);
}
.linear-fn3 {
  animation-timing-function: linear(0, 0.75 25%, 1);
}
.linear-fn4 {
  animation-timing-function: linear(0, 0.5 25% 75%, 1);
}
.linear-fn5 {
  animation-timing-function: linear(0, 0.25 45%, 0.75 55%, 0.5 70%, 1);
}
.linear-fn6 {
  animation-timing-function: linear(0, 1.2 50%, 0.75 80%, 1);
}
.linear-fn7 {
  animation-timing-function: linear(0, 0.5 75%, 1 120%);
}

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

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

Примеры кривых Безье

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

<div class="parent">
  <div class="linear">linear</div>
  <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="cb">cubic-bezier(.5, -0.5, 1, 1.5)</div>
</div>
<div class="x-axis"><span>50%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}
.ease {
  animation-timing-function: ease;
}
.ease-in {
  animation-timing-function: ease-in;
}
.ease-out {
  animation-timing-function: ease-out;
}
.ease-in-out {
  animation-timing-function: ease-in-out;
}
.cb {
  animation-timing-function: cubic-bezier(0.5, -0.5, 1, 1.5);
}

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

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

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

<div class="parent">
  <div class="linear">linear</div>
  <div class="start">steps(4, start)</div>
  <div class="jump-start">steps(4, jump-start)</div>
  <div class="end">steps(4, end)</div>
  <div class="jump-end">steps(4, jump-end)</div>
  <div class="jump-both">steps(4, jump-both)</div>
  <div class="jump-none">steps(4, jump-none)</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
<div class="x-axis"><span>25%</span><span>50%</span><span>75%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 24.8%,
    grey 24.8%,
    grey 25.2%,
    white 25.2%,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%,
    white 74.8%,
    grey 74.8%,
    grey 75.2%,
    white 75.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}

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

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

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

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

См. также

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