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

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


10.0+	26.0+	12.1+	3.0+	16.0+	4.0+	2.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	+

Для чего используется?

Данное свойство по характеру своего действия напоминает работу transition-duration с тем отличием, что время осуществления анимации в этом случае определяется функцией зависимости аргумента от переменной. Такой способ определения времени протекания процесса позволяет осуществлять его работу с непостоянной скоростью. То есть, к примеру, процесс начинает действовать с одной скоростью, а заканчивает с другой.

Предел значений, которые обретает функция, лежит в интервале от (0;0) до (1;1), с той оговоркой, что аргумент может незначительно выходить из указанного отрезка.

Как правильно задавать?

transition-timing-function: значение функции;

Какие могут быть значения?

ease - в этом случае процесс начинается медленно, потом ускоряется и в определенный момент опять замедляется. Соответствует значению cubic-bezier(0.25,0.1,0.25,1);
ease-in - анимация начинается с одной скоростью, а потом значение скорости увеличивается и анимация начинает протекать быстрее. Соответствует значению cubic-bezier(0.42,0,1,1);
ease-out - противоположен действию ease-in, то есть к концу действия процесс замедляется. Соответствует значению cubic-bezier(0,0,0.58,1);
ease-in-out - отвечает за замедление процесса. Соответствует значению cubic-bezier(0.42,0,0.58,1);
linear - соответствует постоянной скорости истечения процесса;
step-start - формирует мгновенный переход объекта к начальному состоянию;
step-end - формирует мгновенный переход объекта к конечному состоянию;
steps - анимация протекает ступенчато, без плавных переходов.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-timing-function</title>
  <style>
   .download {
    background: #5877b4;
    border: 2px solid #000;
    height: 20px;
    position: relative;
   }
   .download:hover::before{
    width: 100%;
   }
   .download::before{
    transition-timing-function: linear;
    transition-duration: 5s;
    content: '';
    position: absolute;
    height: 100%; width: 0;
    background: #fff;
   }
  </style>
 </head>
 <body>
  <div class="download"></div>
 </body>
</html>

Тип CSS свойства:

Анимация