AJAX загрузка
home

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

Пример

div {
width:230px;
transition:width 4s;
}
div:hover {
width:600px;
}
transition-timing-function:linear;
transition-timing-function:ease;
transition-timing-function:ease-in;
transition-timing-function:ease-out;
transition-timing-function:ease-in-out;
transition-timing-function:cubic-bezier(0.6,0.2,0.5,0.6);


Быстрый просмотр

Описание

Обратите внимание: данное свойство поддерживается в браузерах IE10+, Chrome, Opera и Firefox. Для браузера Safari требуется префикс -webkit.

С помощью свойства transition-timing-function Вы можете задать функцию смягчения отвечающую за плавность выполнения перехода.

В CSS3 существуют следующие функции смягчения:

  • linear переход будет иметь одинаковую скорость на протяжении всего времени выполнения;
  • ease переход будет иметь медленную скорость выполнения в начале потом начнет ускоряться и снова замедляется в конце (является значением по умолчанию);
  • ease-in переход будет иметь медленную скорость выполнения в начале;
  • ease-out переход будет иметь медленную скорость выполнения в конце;
  • ease-in-out переход будет иметь медленную скорость выполнения в начале и в конце;
  • cubic-function(x,x,x,x) позволяет задать плавность выполнения перехода с помощью функции. Функция принимает значения от 0 до 1.