Перейти к содержанию

transition-timing-function

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

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

Рис. 1. Вид функции

Переходы и Анимации

Синтаксис

/* 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, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
transition-timing-function: frames(10);

/* Multiple timing 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: unset;

Значения

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).
linear
Одинаковая скорость от начала и до конца.
step-start
Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end
Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
cubic-bezier
Задаёт функцию движения в виде кривой Безье.
steps
Ступенчатая функция, имеющая заданное число шагов.
transition-timing-function: steps(<число>, start | end)
Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.

Примечание

  • Chrome до версии 26, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition-timing-function.
  • Opera до версии 12.10 поддерживает свойство -o-transition-timing-function.
  • Firefox до версии 16 поддерживает свойство -moz-transition-timing-function.
  • Safari поддерживает значение steps только с версии 5.1.

Значение по-умолчанию: ease

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

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

Поддержка браузерами

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition-timing-function</title>
    <style>
      .progress {
        background: #333; /* Фон */
        border: 2px solid #333; /* Рамка */
        height: 20px; /* Высота */
        position: relative; /* Относительное позиционирование */
      }
      .progress:hover::before {
        width: 100%;
      }
      .progress::before {
        transition-timing-function: linear;
        transition-duration: 5s;
        content: '';
        position: absolute; /* Абсолютное позиционирование */
        height: 100%;
        width: 0;
        background: #ffa600; /* Фон */
      }
    </style>
  </head>
  <body>
    <div class="progress"></div>
  </body>
</html>