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

Свойство CSS transition-timing-function задаёт кривую скорости перехода — то есть определяет, как вычисляются промежуточные значения в течение всей длительности перехода. Оно не влияет на продолжительность перехода (за это отвечает transition-duration); вместо этого оно управляет темпом анимации.

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

Свойство transition-timing-function входит в число свойств CSS3.

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

Значения-ключевые слова

Свойство принимает следующие именованные кривые:

ease — медленный старт, быстрая середина, медленный финал (значение по умолчанию)
linear — постоянная скорость на протяжении всего перехода
ease-in — медленный старт, ускорение к концу
ease-out — быстрый старт, замедление к концу
ease-in-out — медленный старт и медленный финал, быстрая середина
step-start — мгновенный переход к конечному значению (без промежуточных состояний)
step-end — удержание начального значения, затем скачок в конце

Каждое ключевое слово является сокращением для базового определения cubic-bezier() или steps() — например, linear равен cubic-bezier(0, 0, 1, 1), а ease равен cubic-bezier(0.25, 0.1, 0.25, 1).

Начальное значение	ease
Применяется к	Всем элементам, псевдоэлементам ::before и ::after.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS3
Синтаксис DOM	object.style.transitionTimingFunction = "ease";

Синтаксис

Значения CSS transition-timing-function

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Если значение не указано, браузер использует начальное значение ease.

Пример transition-timing-function

В приведённом ниже примере два свойства анимируются одновременно. Первая функция плавности применяется к первому transition-property (background-color), а вторая — к left. Кривая cubic-bezier() здесь намеренно превышает 1, поэтому блок слегка проскакивает мимо цели — чего ни одно из ключевых слов сделать не может.

Пример кода CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <p>Hover over the element to see the effect</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример transition-timing-function со значениями "ease", "linear", "ease-in" и "ease-out"

Пример кода значений CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: ease;
      }
      .el2 {
        transition-timing-function: linear;
      }
      .el3 {
        transition-timing-function: ease-in;
      }
      .el4 {
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Наведите курсор на контейнер и понаблюдайте за четырьмя кругами: linear движется с постоянной скоростью, ease-in сначала отстаёт, а затем нагоняет, а ease-out стремительно стартует и плавно останавливается.

Пример transition-timing-function со значениями "step-start" и "step-end"

Ещё один пример CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: step-start;
      }
      .el2 {
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Функция cubic-bezier()

Каждая кривая-ключевое слово основана на кубической кривой Безье, а cubic-bezier(x1, y1, x2, y2) позволяет задать собственную. Четыре числа — это координаты двух контрольных точек; начальная точка (0, 0) и конечная точка (1, 1) зафиксированы.

/* a gentle ease-out */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* an overshoot/"bounce" — the y values can go below 0 or above 1 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Значения x (x1, x2) должны находиться в диапазоне 0–1, однако значения y могут выходить за его пределы — именно так создаются эффекты проскакивания или антиципации. Это наиболее гибкое значение, которое стоит использовать, когда ключевые слова кажутся слишком общими.

Функция steps()

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

/* 4 equal jumps */
transition-timing-function: steps(4, end);

Необязательный второй аргумент определяет, происходит ли скачок в начале или в конце каждого интервала (по умолчанию end). Ключевые слова step-start и step-end — это просто steps(1, start) и steps(1, end).

Задание кривой для каждого свойства

При одновременном переходе нескольких свойств можно указать список функций плавности через запятую. Каждая из них соответствует соответствующей записи в transition-property:

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.27, 1.55);

Если функций плавности меньше, чем свойств, список повторяется; если больше — лишние игнорируются.

Распространённые ошибки

Управляет только темпом, но не временем. Более динамичная кривая не ускоряет завершение перехода — для этого изменяйте transition-duration.
x должен оставаться в диапазоне [0, 1]. В cubic-bezier() значение x вне диапазона делает всё объявление недействительным, и браузер возвращается к ease.
В списках важен порядок. N-я функция плавности соответствует N-му transition-property, а не имени — следите за выравниванием списков.
Предпочитайте сокращение transition в рабочем коде; показанные здесь полные свойства используются главным образом для наглядности.

Значения

Значение	Описание
ease	Эффект перехода начинается медленно, затем ускоряется и заканчивается медленно. Это значение по умолчанию.
linear	Эффект перехода выполняется с постоянной скоростью от начала до конца.
ease-in	Эффект перехода начинается медленно и ускоряется к концу.
ease-out	Эффект перехода начинается быстро, но замедляется к концу.
ease-in-out	Эффект перехода начинается медленно и заканчивается медленно.
step-start	Эквивалентно `steps(1, start)`.
step-end	Эквивалентно `steps(1, end)`.
steps(int,start\|end)	Задаёт ступенчатую функцию с двумя параметрами. Первый параметр определяет количество интервалов функции; он должен быть больше 0. Второй параметр принимает значение "start" или "end" и определяет момент изменения значений внутри интервала. Если второй параметр не указан, используется значение "end".
cubic-bezier (n,n,n,n)	Задаёт кубическую кривую Безье для определения ускорения и замедления перехода.
initial	Устанавливает для свойства его значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Практика

Свойство CSS transition-timing-function имеет все перечисленные значения, кроме

ease-in-outstep-endpausedlinear