AJAX загрузка
home

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