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

Пример


@keyframes anim1 {
from {width:100px;}
to {width:500px;}
}

animation-timing-function:linear;
animation-timing-function:ease;
animation-timing-function:ease-in;
animation-timing-function:ease-out;
animation-timing-function:ease-in-out;

Попробовать в редакторе

Описание

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

С помощью свойства animation-name Вы можете установить функцию смягчения отвечающую за плавность выполнения анимации.

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

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

« CSS Справочник