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

СВОЙСТВО ANIMATION-DIRECTION

Свойство animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.

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

10+

Синтаксис

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit

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

Значение Описание
normal Анимация воспроизводится обычным путём. Это значение по умолчанию.
reverse Анимация воспроизводится в обратном направлении.
alternate Сначала анимация воспроизводится вперед, затем назад.
alternate-reverse Сначала анимация воспроизводится назад, затем вперёд.
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

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

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

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