CSS-свойство animation-timing-function указывает, как должна развиваться CSS-анимация в течение каждого цикла.

Значение по умолчанию: ease
Применяется к: Все элементы, ::before и ::after псевдо-элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
    animation-timing-function: ease-in;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Значения свойств

В следующей таблице описаны значения этого свойства.

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

Поддержка браузеров

Свойство animation-timing-function поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.