<easing-function>

linear

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

<linear-easing-function>

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

Функция linear() определяет <linear-stop-list>, список точек вдоль прогресса анимации или перехода, разделенный запятыми. Каждая точка или <linear-stop> в списке указывается как <number> между 0 и 1. По умолчанию каждая точка в <linear-stop-list> равномерно распределена. Для более точного управления прогрессом анимации или перехода каждая точка может содержать до двух необязательных значений <percentage> <linear-stop-length>.

• <number>: Представляет момент времени вдоль длительности анимации или перехода. Значение 0 представляет начало итерации, а 1 — конец. Также допускаются значения вне диапазона от 0 до 1.

• <percentage>: Указывает положение линейной точки вдоль длительности. Может принимать до двух значений. Если указано одно значение, оно определяет начало соответствующей линейной точки. Если указаны два процентных значения, они определяют длину точки: первое процентное значение указывает начальную точку, а второе — конечную точку для данного сегмента в анимации или переходе. Если значение <percentage> не указано, по умолчанию точки распределяются равномерно по временной шкале.

<cubic-bezier-easing-function>

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

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> для формирования кривой.

• <number>: Указывает расположение точек P1 и P2 на кривой. <x1> и <y1> — координаты точки P1, а <x2> и <y2> — координаты точки P2. <x1> и <x2> значения должны быть в диапазоне от 0 до 1, в противном случае функция будет работать некорректно.

<step-easing-function>

Определяет функцию steps() , которая делит анимацию на определенное количество равных интервалов или «шагов», заставляя анимацию перепрыгивать между шагами, а не плавно переходить. Этот параметр принимает одно из следующих двух ключевых слов, которые соответствуют предопределенным функциям steps() или пользовательской функции steps():

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

step-end: Это ключевое слово представляет функцию плавного изменения steps(1, jump-end) или steps(1, end). Оно указывает, что интерполяция остается в начальном состоянии до конца, после чего сразу переходит в конечное состояние.

steps(): Эта функция принимает положительное целое <integer> и необязательный <step-position>.

• <integer>: Представляет количество равномерно распределённых интервалов или «шагов». Оно должно быть положительным целым числом, большим 0 , если второй параметр не равен jump-none, в этом случае оно должно быть положительным целым числом, большим 1.

• <step-position>: Указывает время перехода для перехода, чтобы произойти либо в начале, либо в конце, либо в начале и в конце, либо ни в начале, ни в конце. Возможные ключевые слова включают:

  • jump-start обозначает, что первый переход происходит сразу в начале, фактически в точке 0. В точке 0% время не тратится.
  • jump-end обозначает, что последний переход происходит сразу в конце, фактически в точке 1. В точке 100% время не тратится. Это значение по умолчанию, если <step-position> не указано.
  • jump-none обозначает, что переход не происходит ни в начале, ни в конце, эффективно удаляя шаг в течение продолжительности. Вместо этого прогресс сохраняется в точке 0% и точке 100%. Продолжительность этих остановок определяется путём деления общей продолжительности на количество шагов (1/n).
  • jump-both обозначает, что переходы происходят как в начале, так и в конце, фактически происходят как в точке 0 , так и в точке 1 . В конечном счете, к концу добавляется шаг. Время не тратится в точках 0% и 100%.
  • start эквивалентно jump-start.
  • end эквивалентно jump-end.

Существует три типа функций плавного изменения:

• Линейная
• Кубическая Безье
• Шаги

Функция linear() создает кусочно-линейную плавность, позволяющую приблизить сложные анимации и переходы, интерполируя линейно между заданными точками. Интерполяция происходит с постоянной скоростью от начала до конца. Типичное использование функции linear() — предоставление множества точек для приближения любой кривой.

Например, функция linear(0, 0.25, 1) имеет линейные точки остановок 0, 0.25, и 1 в качестве аргументов. Анимация или переход начинается в точке 0, линейно перемещается к 0.25, а затем линейно продолжается до точки 1. Поскольку процент <linear-stop-length> не указан, для перехода от 0 к 0.25 и от 0.25 к 1 используется одинательная продолжительность (50%).

По умолчанию точки остановок равномерно распределены. Так, если имеется 5 точек остановок, они будут находиться на 0%, 25%, 50%, 75% и 100% продолжительности. Вы можете использовать необязательные значения процентов <linear-stop-length> для более точного управления, определяя начало и/или длину каждого сегмента, что позволяет получить более контролируемое развитие перехода.

Рассмотрим анимацию с продолжительностью 100 секунд и изменением на 100 пикселей. Давайте рассмотрим пример, где плавность анимации задается: linear(0, 0.25 75%, 1). В этом случае анимация достигает 25 пикселей (25% от общего изменения) за первые 75 секунд (75% от продолжительности). Последние 75 пикселей применяются в оставшиеся 25 секунд анимации. Для той же анимации, предположим, что функция плавности задана вместо этого как linear(0, 0.5 25% 75%, 1). Здесь анимация достигает 50 пикселей (50% от общего изменения) за 25 секунд (25% от продолжительности) и остается там на 50 секунд (75% - 25% от продолжительности). Затем последние 50 пикселей применяются в оставшиеся 25 секунд продолжительности. Обратите внимание, что linear(0, 0.5 25% 75%, 1) эквивалентно linear(0, 0.5 25%, 0.5 75%, 1).

Функциональная запись cubic-bezier() определяет кубическую кривую Безье. Функции плавности в подмножестве функций плавности кубического Безье часто называются «гладкими» функциями плавности, потому что они могут использоваться для сглаживания начала и конца интерполяции. Они сопоставляют входной прогресс с выходным прогрессом, оба выраженные в виде <number>. Для этих значений 0.0 представляет начальное состояние, а 1.0 — конечное состояние.

Кубическая кривая Безье определяется четырьмя точками: P0, P1, P2 и P3. Точки P0 и P3 представляют начало и конец кривой. В CSS эти точки фиксированы как координаты прогресса (абсцисса — входной прогресс, ордината — выходной прогресс). P0 — это (0, 0) и представляет начальный прогресс и начальное состояние. P3 — это (1, 1) и представляет конечный прогресс и конечное состояние.

Не все кубические кривые Безье подходят в качестве функций плавности, потому что не все являются математическими функциями; т. е. кривые, для которых при заданной абсциссе существует ноль или одно значение. При фиксированных P0 и P3, определенных CSS, кубическая кривая Безье является функцией и, следовательно, является допустимой только в том случае, если абсциссы P1 и P2 находятся в диапазоне [0, 1].

Кубические кривые Безье с ординатой P1 или P2 вне диапазона [0, 1] могут привести к тому, что значение уйдет дальше конечного состояния и затем вернется. В анимациях для некоторых свойств, таких как left или right, это создаёт эффект «отскока».

Однако некоторые свойства ограничат выходные данные, если они выйдут за допустимый диапазон. Например, цветовой компонент, превышающий 255 или меньший 0 в rgb(), будет обрезаться до ближайшего допустимого значения (255 и 0, соответственно). Некоторые значения cubic-bezier() обладают этим свойством.

Если вы зададите недопустимую кубическую кривую Безье, CSS проигнорирует всё свойство.

Ключевые слова ease, ease-in, ease-out, и ease-in-out эквивалентны определённому значению cubic-bezier().

Функциональная запись steps() определяет ступенчатую функцию, которая делит область значений выходных данных на равномерно распределённые шаги. Этот подкласс ступенчатых функций также иногда называется функциями «лестницы».

Вот несколько примеров, иллюстрирующих функцию steps():

steps(2, jump-start) /* Or steps(2, start) */
steps(4, jump-end) /* Or steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)

Ключевые слова step-start и step-end эквивалентны определённому значению steps().

<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         

Этот пример предоставляет простое сравнение различных функций плавности с помощью анимации. В раскрывающемся меню вы можете выбрать функцию плавности — там есть несколько ключевых слов и некоторые 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:

/* The canonical Bézier curve with four <number> in the [0,1] range */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* Using <integer> is valid because any <integer> is also a <number>. */
cubic-bezier(0, 0, 1, 1)

/* Negative values for ordinates are valid, leading to bouncing effects. */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Values greater than 1.0 for ordinates are also valid. */
cubic-bezier(0, 1.1, 0.8, 4)

Следующие определения кубических кривых Безье недопустимы:

/* Though the animated output type may be a color,
   Bézier curves work with numerical ratios. */
cubic-bezier(0.1, red, 1.0, green)

/* Abscissas must be in the [0, 1] range or
   the curve is not a function of time. */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* The two points must be defined, there is no default value. */
cubic-bezier(0.3, 2.1)

/* Abscissas must be in the [0, 1] range or
   the curve is not a function of time. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

Эти функции плавности допустимы:

/* There are 5 treads, the last one happens
   right before the end of the animation. */
steps(5, end)

/* A two-step staircase, the first one happening
   at the start of the animation. */
steps(2, start)

/* The second parameter is optional. */
steps(2)

Эти функции плавности недопустимы:

/* The first parameter must be an <integer> and
   cannot be a real value, even if it is equal to one. */
steps(2.0, jump-end)

/* The amount of steps must be non-negative. */
steps(-3, start)

/* There must be at least one step. */
steps(0, jump-none)

• CSS анимации
• CSS переходы
• cubic-bezier
• linear() генератор плавности