Свойство animation-timing-function
  1. Главная
  2. CSS
  3. Свойство animation-timing-function
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО ANIMATION-TIMING-FUNCTION

Свойство animation-timing-function определяет как должна прогрессировать анимация в течении каждого цикла.

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

10+

Синтаксис

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

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

Значение Описание
linear Анимация проигрывается с одинаковой скоростью от начала до конца.
ease Анимация начинается медленно, затем ускоряется и заканчивается медленно. Это значение по умолчанию.
ease-in Анимация начинается медленно, затем ускоряется.
ease-out Анимация заканчивается медленно.
ease-in-out Похоже на ease, только более плавно.
step-start Анимация сразу переходит в свое конечное состояние, где она остается до конца.
step-end Анимация остается в своем начальном состоянии до конца, после чего она сразу переходит в конечное состояние..
steps(int,start|end) Определяет пошаговую функцию с двумя параметрами. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое положительное число. Второй параметр, который является необязательным, является либо начальным значением, либо конечным, и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр не указан, ему присваивается конечное значение.
cubic-bezier(n,n,n,n) Позволяет задавать свои собственные значения для функции cubic-bezier. Возможные значения - числовые значения от 0 до 1.
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="item"></div>
HTML 
.item {
    width: 120px;
    height: 120px;
    background: beige;
    position: relative;
    animation-name: animation;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.item:hover {
    animation-play-state: paused
}

@keyframes animation {
    from {
        left: 0px;
        border-radius: 50%;
    } to {
        left: 280px;
        border-radius: 0;
    }
}
CSS
← Перейти к списку свойств