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

transition-timing-function

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

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

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

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* 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.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>

Комментарии