CSS Reference Manual

CSS @rules (RULES)

Всі атрибути CSS

Свойство backface-visibility CSS Свойство animation-play-state CSS3

Метод використання та приклади атрибута animation-timing-function CSS3

Атрибути animation-timing-function CSS3 визначають, як повинна проходити анімація в кожному циклі.

Нижче наведено таблицю, яка підсумовує контекст використання та історію версій цього атрибута.

Значення за замовчуванням:	ease
Застосовується до:	Всі елементи::before і ::after Псевдоелементи
Наслідування:	Немає
Анімація:	НіСм. також Атрибути анімації。
Версия:	Новая функция CSS3
JavaScript syntax:	object　　　object.style.animationTimingFunction="linear"

Синтаксис использования animation-timing-function

Грамматика этого свойства такая:

animation-timing-function:　linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

Ниже приведен пример того, как использовать атрибут animation-timing-function.

Пример

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-timing-function:　ease-in;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-timing-function:　ease-in;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Проверьте‹/›

Значения атрибута

В таблице ниже описаны значения этого атрибута.

Значение	Описание
linear	Указывает, что анимация начинается с постоянной скорости и переходит в конечное состояние.
ease	Похож на ease-in-out, хотя в начале ускорение происходит быстрее, и в середине уже начинается замедление.
ease-in	Указывает, что анимация начинается медленно, затем ускоряется до конечного состояния и внезапно останавливается.
ease-out	Указывает, что анимация быстро начинается, а затем медленно замедляется, приближаясь к конечному состоянию.
ease-in-out	Указывает, что анимация начинает медленно, затем ускоряется и затем замедляется, приближаясь к конечному состоянию.
`cubic-bezier(n,n,n,n)`	Определяет кривую Безье третьего порядка. Также известна как кривая скорости. Возможные значения - числа от 0 до 1.
initial	Установите этот атрибут в его значение по умолчанию.
inherit	Если указано, то связанный элемент принимает значение вычисленного значения атрибута animation-timing-function родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойства animation-timing-function, все основные браузеры поддерживают этот атрибут.

	Firefox 5+ ^-moz-，15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-，15+ ^-webkit-

Дополнительное чтение

Узнайте больше из следующих руководств:CSS3 анимации。

Соответствующие атрибуты и правила:animation，animation-name，animation-duration，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。

Свойство backface-visibility CSS Свойство animation-play-state CSS3