Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

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

Дата:12.10.15 в 18:31
Справочник: 

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

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

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>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: