Клавиша / esc

transition-timing-function

Будет ли элемент меняться линейно или более причудливо?

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

В примере ниже свойство color будет меняться линейно (равномерно) на протяжении 300 мс.

        
          
          .box {  transition-property: color;  transition-duration: .3s;  transition-timing-function: linear;}
          .box {
  transition-property: color;
  transition-duration: .3s;
  transition-timing-function: linear;
}

        
        
          
        
      

Как пишется

Скопировано

Ключевые слова в качестве значений:

        
          
          .selector {  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;}
          .selector {
  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;
}

        
        
          
        
      

Описание функций в качестве значений:

        
          
          .selector {  transition-timing-function: steps(4, jump-end);  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
          .selector {
  transition-timing-function: steps(4, jump-end);
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

        
        
          
        
      

Дополнительные параметры функции Steps:

        
          
          .selector {  transition-timing-function: steps(4, jump-start);  transition-timing-function: steps(10, jump-end);  transition-timing-function: steps(20, jump-none);  transition-timing-function: steps(5, jump-both);  transition-timing-function: steps(6, start);  transition-timing-function: steps(8, end);}
          .selector {
  transition-timing-function: steps(4, jump-start);
  transition-timing-function: steps(10, jump-end);
  transition-timing-function: steps(20, jump-none);
  transition-timing-function: steps(5, jump-both);
  transition-timing-function: steps(6, start);
  transition-timing-function: steps(8, end);
}

        
        
          
        
      

Указание нескольких функций:

        
          
          .selector {  transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);}
          .selector {
  transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

        
        
          
        
      

Как понять

Скопировано

Например, нам нужно изменить какое-то свойство от 0 до 100 за 1 секунду. В течение этой секунды значение свойства может меняться с разной скоростью. Как именно — как раз описывает наша функция.

Например, если свойство меняется равномерно всю секунду, то это линейная зависимость, которая описывается ключевым словом linear и выглядит так:

Линейная функция

Если свойство меняется сначала быстро, а потом медленнее, то эта зависимость описывается ключевым словом ease-out и выглядит так:

Функция ease-out

Функция cubic-bezier

Скопировано

В общем случае график функции описывается значением cubic-bezier(p1, p2, p3, p4). В качестве параметров p1 и p3 обязательно должны быть числа от 0 до 1.

Каждому ключевому слову соответствует свой график функции с определёнными коэффициентами:

  • linearcubic-bezier(0.0, 0.0, 1.0, 1.0)
  • easecubic-bezier(0.25, 0.1, 0.25, 1.0)
  • ease-incubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-outcubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-outcubic-bezier(0.42, 0, 0.58, 1.0)
Открыть демо в новой вкладке

Функция steps

Скопировано

Изменять свойство можно не плавно, а скачками. Функция steps описывает, за сколько шагов должно произойти изменение свойства.

        
          
          .box {  transition-timing-function: steps(5, jump-start);}
          .box {
  transition-timing-function: steps(5, jump-start);
}

        
        
          
        
      

Первый параметр указывает количество шагов, за которое будет изменено свойство. При этом каждый шаг будет отображаться равное количество времени.

Второй параметр определяет логику, по которой будет разделён промежуток на отрезки.

Например, если первый параметр равен 5, то всего будет 5 шагов. На каждом шаге отображение будет задерживаться, следуя одному из условий в зависимости от второго параметра. Второй параметр может принимать следующие значения:

jump-start, jump-end, jump-both, jump-none, start, end

  • на 20%, 40%, 60%, 80% и 100% — jump-start. В момент старта анимации текущее значение сразу прыгнет на 20% и там задержится на $1/5$ времени.
  • на 0%, 20%, 40%, 60% и 80% — jump-end. Текущее значение начинает задержку сразу на 0%
  • или сделает 5 остановок в промежутке между 0% и 100% (16%, 33%, 50%, 66%, 84%) — jump-both
  • или сделает 5 остановок, включая 0% и 100% (0%, 25%, 50%, 75%, 100%) — jump-none

Интересно, что Safari вплоть до версии 13.1 (Catalina) не поддерживал эти значения 🤷‍♂️
Начиная с версии 14 (Big Sur) в Safari все хорошо 🙂

В зависимости от используемого сейчас браузера пример ниже может изменяться:

Открыть демо в новой вкладке

Ключевые слова step-start, step-end являются синонимами для записи steps(1, jump-start) и steps(1, jump-end). Изменение происходит скачком за один шаг.

step-start переходит в конечное состояние сразу при старте анимации и дожидается конца анимации.

step-end дожидается конца анимации и потом переходит в конечное состояние

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Если не указано свойство transition-timing-function, то по умолчанию браузер будет использовать функцию ease и соответствующее ей описание cubic-bezier(0.25, 0.1, 0.25, 1.0)

💡 Задавая коэффициенты p2 и p4 меньше 0 или больше 1, можно добиться эффекта «пружины», что в некоторых случаях может сделать анимацию более интересной

Открыть демо в новой вкладке

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 Самой часто используемой функцией анимации является ease. В основном, потому что верстальщикам лень писать значение функции, а по умолчанию в браузере используется именно ease.

Егор Левченко советует

Скопировано

🛠 Если вы хотите создать крутую анимацию и понимаете, как именно должна выглядеть ваша Кривая Безье, можно воспользоваться специальным сайтом, например https://cubic-bezier.com/.

        
          
          .selector {  transition-timing-function: cubic-bezier(1, .2, .52, .46);}
          .selector {
  transition-timing-function: cubic-bezier(1, .2, .52, .46);
}

        
        
          
        
      

Алёна Батицкая советует

Скопировано

🛠 Если создаёте анимацию, имитирующую реальный мир, то очень важно правильно подбирать временную функцию анимации. Потому что в реальном мире ничего не двигается резко или линейно.