transition-timing-function CSS

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

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

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

Свойство **`transition-timing-function`** устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода. `transition-timing-function` представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через [`transition-property`](/css/transition-property/) значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1). ![Рис. 1. Вид функции](/workspace/uploads/css/css_timing-function-1_1.png)
Значение по умолчанию:

ease

Значение по умолчанию:
`ease`
Наследуется:
Нет
Применяется:

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

Применяется:
Ко всем элементам, к псевдоэлементам `::before` и `::after`
Анимируется:
Нет
Объект JavaScript:

object.style.transitionTimingFunction

Объект JavaScript:
`object.style.transitionTimingFunction`
Спецификации:
Спецификации:
* [CSS Transitions](http://dev.w3.org/csswg/css-transitions/#transition-timing-function)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-transitions" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-transitions">Can I Use css-transitions?</a> Data on support for the css-transitions feature across the major browsers from caniuse.com. </p>

Синтаксис

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

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

Синтаксис

/* 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, 0.1); transition-timing-function: frames(10); /* Multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 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 — Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
  • steps — Ступенчатая функция, имеющая заданное число шагов.

    transition-timing-function: steps(<число>, start | end)

Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.

  • cubic-bezier — Задаёт функцию движения в виде кривой Безье.

Примечание

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

Примеры

<!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>

Примеры

<!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>

Содержание

  • Синтаксис
      /* 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, 0.1); transition-timing-function: frames(10); /* Multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset;
  • Значения
    • Примеры
        <!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>

    В начало