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

❮ Назад Вперед ❯

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

Имеет следующие значения:

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

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии), -moz- для Firefox, -o- для более старых версий Opera.

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

Синтаксис

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;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .box {
      padding: 2em;
      width: 40px;
      height: 40px;
      left: 0;
      background-color: #666;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      -webkit-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -moz-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      -o-transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      transition-timing-function:  ease-out, cubic-bezier(.75, .3, .14, 1.12);
      /* первое значение соответствует первому значению свойства transition-property value, а второе соответствует второму значению*/
      }
      .example:hover .box {
      left: 450px;
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-timing-function</h2>
    <p>Наведите курсор мыши на элемент и увидите результат сами.</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example {
      padding: 2em;
      width: 30px;
      height: 30px;
      left: 0;
      background-color: #666;
      border-radius: 50%;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-timing-function:  ease;
      -moz-transition-timing-function:  ease;
      -o-transition-timing-function:  ease;
      transition-timing-function:  ease;
      }
      .el2 {
      -webkit-transition-timing-function:  linear;
      -moz-transition-timing-function:  linear;
      -o-transition-timing-function:  linear;
      transition-timing-function:  linear;
      }
      .el3 {
      -webkit-transition-timing-function:  ease-in;
      -moz-transition-timing-function:  ease-in;
      -o-transition-timing-function:  ease-in;
      transition-timing-function:  ease-in;
      }
      .el4 {
      -webkit-transition-timing-function:  ease-out;
      -moz-transition-timing-function:  ease-out;
      -o-transition-timing-function:  ease-out;
      transition-timing-function:  ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-timing-function</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>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example {
      padding: 2em;
      width: 30px;
      height: 30px;
      left: 0;
      background-color: #666;
      border-radius: 50%;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-timing-function:  step-start;
      -moz-transition-timing-function:  step-start;
      -o-transition-timing-function:  step-start;
      transition-timing-function:  step-start;
      }
      .el2 {
      -webkit-transition-timing-function:  step-end;
      -moz-transition-timing-function:  step-end;
      -o-transition-timing-function:  step-end;
      transition-timing-function:  step-end;
      }
    </style>
  </head>
  <body>
    <h2> Пример свойства transition-timing-function</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>

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

Значения

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