`<easing-function>` — тип CSS

<easing-function> CSS тип данных представляет математическую функцию, которая описывает скорость изменения значения.

Этот переход между двумя значениями может применяться в разных ситуациях. Его можно использовать для описания скорости изменения значений во время анимации. Это позволяет менять скорость анимации на протяжении всего её выполнения. Функцию плавности можно задать для свойств CSS transition и animation.

Синтаксис

/* Keyword linear easing function */
linear                /* linear(0, 1) */

/* Custom linear easing functions */
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)

/* Keyword cubic Bézier easing functions */
ease                  /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in               /* cubic-bezier(0.42, 0, 1, 1) */
ease-out              /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out           /* cubic-bezier(0.42, 0, 0.58, 1) */

/* Custom cubic Bézier easing function */
cubic-bezier(0.25, 0.1, 0.25, 1)

/* Keyword step easing functions */
step-start            /* steps(1, jump-start) */
step-end              /* steps(1, jump-end) */

/* Custom step easing functions */
steps(4, end)
steps(10, jump-both)

Значения

<easing-function> может быть одним из следующих типов:

<linear-easing-function>

Создаёт переходы с постоянной скоростью. Эту функцию можно задать одним из следующих способов:

linear

Задаёт постоянную скорость интерполяции без изменения темпа на протяжении всего периода (то есть без ускорения или замедления). Это ключевое слово эквивалентно linear(0, 1). Его также можно представить в виде cubic-bezier(0, 0, 1, 1).

Примечание: Ключевое слово linear всегда интерпретируется как linear(0, 1), тогда как функция linear(0, 1) интерпретируется как linear(0 0%, 1 100%).

linear()

Задаёт несколько точек прогресса с помощью значений <number> и необязательных значений <percentage>, которые позволяют управлять временем их достижения.

<cubic-bezier-easing-function>

Создаёт плавные переходы с переменной скоростью изменения. Эту функцию можно задать одним из следующих способов:

ease

Представляет функцию плавности cubic-bezier(0.25, 0.1, 0.25, 1). Интерполяция начинается медленно, резко ускоряется, а затем постепенно замедляется к концу. Она похожа на ключевое слово ease-in-out, но в начале ускорение происходит резче.

ease-in

Представляет функцию плавности cubic-bezier(0.42, 0, 1, 1). Интерполяция начинается медленно, затем постепенно ускоряется и резко останавливается в конце.

ease-out

Представляет функцию плавности cubic-bezier(0, 0, 0.58, 1). Интерполяция начинается резко, а затем постепенно замедляется к концу.

ease-in-out

Представляет функцию плавности cubic-bezier(0.42, 0, 0.58, 1). Интерполяция начинается медленно, ускоряется, а затем замедляется к концу. В начале она ведёт себя как ключевое слово ease-in, а в конце — как ease-out.

cubic-bezier()

Задаёт пользовательскую кривую с помощью четырёх значений <number>, определяющих координаты двух контрольных точек. Координаты x должны находиться в диапазоне [0, 1].

<step-easing-function>

Создаёт ступенчатые переходы, разделяя анимацию на заданное количество интервалов одинаковой длины. В результате анимация перескакивает с одного шага на следующий, а не переходит между ними плавно. Эту функцию можно задать одним из следующих способов:

step-start

Представляет функцию плавности steps(1, jump-start) или steps(1, start). Интерполяция сразу переходит в конечное состояние и остаётся в нём до конца.

step-end

Представляет функцию плавности steps(1, jump-end) или steps(1, end). Интерполяция остаётся в исходном состоянии до конца, а затем сразу переходит в конечное состояние.

steps()

Создаёт ступенчатую кривую, используя <integer> для задания количества интервалов и необязательное ключевое слово для управления временем переходов между ступенями.

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

<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

Примеры

Сравнение функций плавности

В этом примере разные функции плавности сравниваются с помощью анимации. В раскрывающемся списке можно выбрать функцию плавности: доступны несколько ключевых слов, а также варианты cubic-bezier() и steps(). Выбрав вариант, можно запустить и остановить анимацию с помощью соответствующей кнопки.

HTML

<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

CSS

body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

JavaScript

const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Start animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Stop animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Start animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

Результат

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

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

См. также

• Модуль функций плавности CSS
• Модуль анимаций CSS
• Модуль переходов CSS
• linear() генератор функций плавности от Jake Archibald
• cubic-bezier.com от Lea Verou