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

Свойство CSS transition-timing-function задаёт кривую скорости перехода на протяжении его длительности.

Свойство transition-timing-function является одним из свойств CSS3.

Оно принимает следующие значения:

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end

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

Синтаксис

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

css

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;

Пример transition-timing-function:

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

Значения

Значение	Описание
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

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

Синтаксис ​

Пример transition-timing-function: ​

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

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

Значения ​

Практика ​

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

Синтаксис

Пример transition-timing-function:

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

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

Значения

Практика