Свойство 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.