Css direction animation: animation-direction — CSS | MDN

animation-direction — CSS | MDN

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Также удобно использовать сокращённое свойство animation, чтобы одновременно установить все свойства анимации.

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;


animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;


animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Значения

normal

Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.

reverse

Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.

alternate

Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.

alternate-reverse

Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.

Формальный синтаксис

Смотрите примеры CSS анимаций.

BCD tables only load in the browser

Свойство animation-direction — направление анимации

Свойство animation-direction задает
направление анимации. По умолчанию анимация
повторится только 1 раз и затем
вернется в исходное состояние, затем,
если задана задержка animation-delay,
будет ждать заданное время и потом цикл начнется
сначала.

Данное свойство позволяет поменять это поведение,
например, так чтобы анимация после окончания
оставалась в том месте, где она закончилась,
а не перескакивала в начальное положение.

Также можно задать такое поведение: анимация
дойдет до крайней точки и вернется обратно
(как в transition).
Смотрите описание ниже.

Синтаксис

селектор {
animation-direction: normal | reverse | alternate | alternate-reverse;
}

Значения

Значение по умолчанию: normal.

Пример

Сейчас элемент будет двигаться в одну сторону,
а потом возвращаться обратно, так как задано
значение alternate. При этом animation-duration
имеет значение 3 секунды и это значит,
что перемещения «туда» и «обратно» будут
длиться по 3 секунды:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
animation-direction: alternate;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример

Сейчас элемент будет двигаться в обратную
сторону (должен слева направо, а будет
справа налево):

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
animation-direction: reverse;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример

Сейчас элемент будет двигаться туда-сюда,
но в обратном направлении (должен начинать
слева, а будет начинать справа):

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
animation-direction: alternate-reverse;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Смотрите также

• свойство animation-name,
  которое задает имя анимации
• свойство animation-duration,
  которое задает продолжительность анимации
• свойство animation-delay,
  которое задает задержку перед выполнением анимации
• свойство animation-timing-function,
  которое задает скорость выполнения анимации
• свойство animation-iteration-count,
  которое задает количество итераций анимации
• свойство animation-fill-mode,
  которое задает состояние анимации
• свойство animation-play-state,
  которое позволяет поставить анимацию на паузу
• свойство animation,
  представляющее собой сокращение для анимаций
• команду @keyframes,
  задающую ключевые кадры анимации
• плавные переходы transition,
  представляющие собой анимацию по наведению на элемент

CSS animation-direction | TuHub

Общие сведения

Свойство animation-direction полезно и обычно используется вместе со свойством animation-iteration-count. Последнее указывает сколько раз должен повторяться цикл анимации до её завершения, и когда цикл повторяется более одного раза бывает полезно разрешить анимации проигрывать в обратную сторону, с начала до конца (чтобы избежать прыжков из конца в начало, при переключении итерации).

Синтаксис свойства

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

• normal — все итерации анимации проигрываются так как указано. Это означает, что когда первый цикл анимации заканчивается, анимация возвращается в начало и начинается оттуда.
• reverse — все итерации анимации проигрываются в обратном порядке. Это означает, что анимация будет проигрываться от начала к концу так, как это было бы если все ключевые кадры были указаны в обратном порядке.
• alternate — нечётные итерации цикла будут проигрываться в нормальном порядке, а чётные итерации будут проигрываться в обратном порядке. Это означает, что первая итерация будет проигрываться от начала до конца, вторая итерация будет проигрываться от конца к началу, третья итерация будет проигрываться от начала до конца и т. д.
• alternate-reverse — нечётные итерации цикла будут проигрываться в обратном порядке, а чётные итерации будут проигрываться в нормальном порядке. Это означает, что первая итерация будет проигрываться от конца к началу, вторая итерация будет проигрываться от начала к концу, третья итерация будет проигрываться от конца к началу и т. д.

Поддержка браузерами

Примечание

Вы можете указать одно или несколько, разделённых запятыми, значений в animation-direction. Когда вы предоставляете список значений, этот список обычно сопоставляется со списком значений предоставляемым другими свойствами связанными с анимацией, такими как animation-delay, animation-timing-function и animation-name, и другими. Каждый список значений в этих свойствах обрабатывается как массив, в котором у каждого значения есть собственный индекс. После этого значение по индексу сопоставляется со значением из другого списка.

Свойство animation-direction обычно указывается как часть сокращённого свойства animation.

Для того чтобы определить чётная или нечётная итерация, все итерации начинаются с 1.

Пример

направление движения анимации – учебник CSS

В обычном состоянии анимация проигрывается от начала до конца, затем резко, в один момент возвращается в свое первоначальное состояние и, в зависимости от настроек animation-iteration-count, либо повторяется снова, либо больше не воспроизводится.

Резкий возврат анимации из конечного состояния в начальное часто выглядит некрасиво и бросается в глаза. И здесь на помощь приходит свойство animation-direction, которое управляет направлением движения анимации. Например, вы можете сделать так, чтобы по окончанию своего пути анимация возвращалась назад, но не резко, а плавно. Кроме этого, можно заставить анимацию воспроизводиться задом наперед.

Итак, рассмотрим поближе значения свойства animation-direction:

• normal — значение по умолчанию. Анимация воспроизводится от начала до конца, затем резко возвращается к первоначальному состоянию.
• alternate — анимация воспроизводится от начала до конца, после чего плавно возвращается к исходному состоянию, что напоминает перемотку назад. Эффект от этого значения не будет заметен, если анимация проигрывается всего один раз.
• reverse — анимация воспроизводится с конца в начало реверсом, затем резко возвращается в первоначальное состояние, т. е. к первому ключевому кадру.
• alternate-reverse — значение, объединяющее в себе два предыдущих. Анимация воспроизводится с конца в начало, после чего плавно возвращается в исходное состояние, т. е. к первому ключевому кадру. Эффект от этого значения не будет заметен, если анимация проигрывается всего один раз.

Чтобы указать направление анимации, добавьте правило к стилю элемента:

.traffic-light {
        animation-name: changeBackgroundColor;
        animation-duration: 6s;
        animation-direction: alternate-reverse;
}

Далее в учебнике: свойство animation-fill-mode для управления конечным стилем анимации.

css властивість animation-direction

Властивість animation-direction визначає напрямок анімації: анімація може демонструватися тільки в одному напрямку або в обох, чергуючи назад і вперед.

Ви можете прописати, чи буде анімація показуватися в зворотньому порядку у деяких або всіх циклах. Під час демонстрації анімації у зворотньому порядку, animation-timing-function теж приймається до уваги. Наприклад, коли анімація демонструється у зворотньому напрямку, animation-timing-function із встановленого вами значення ease-out змінюється автоматично на ease-in.

Синтакс

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

Властивість animation-direction
може отримувати 6 значень:

normal

Анімація йде з самого початку, після завершення циклу повертається до вихідного стану

reverse

Анімація йде з кінця до початку, потім плавно повертається у вихідне положення

alternate

Анімація йде циклічно з початку до кінця, а потім з кінця до початку.

alternate-reverse

Анімація йде циклічно з кінця до початку, а потім з початку до кінця.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента

Переглядачі

Приклади

Динамічний приклад

Демонстрація дії властивості з різними значеннями

Приклад роботи властивості

Встановлює анімацію в одному і в зворотньому напрямку

div {

   -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ 

  animation-direction: alternate; 

}

Додаткові посилання

animation-delay | htmlbook.ru

Краткая информация

Версии CSS

Описание

Свойство animation-delay устанавливает время ожидания перед воспроизведением анимации. Значение 0s или 0ms, которое установлено по умолчанию, запускает анимацию сразу же, как только она применяется к элементу. Отрицательное значение также включает анимацию без задержек, но приводит к изменению последовательности начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах animation-name.

Синтаксис

animation-delay: <время>[, <время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-delay</title>
  <style>
   @-webkit-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-moz-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-o-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   .flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    /* Задержка перед началом */
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    /* Продолжительность анимации */
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
   }
  </style>
 </head>
 <body>
  <h2>Добро пожаловать!</h2>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.animationDelay

Браузеры

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay.

CSS свойство animation-direction

Пример

Воспроизвести анимацию сначала вперед, затем назад:

div {
анимация-направление: альтернативное;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

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

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следуют -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Синтаксис CSS

направление анимации: нормальное | обратное | альтернативное | альтернативное-обратное | начальное | наследование;

Стоимость недвижимости

Другие примеры

Пример

Воспроизвести анимацию сначала назад, затем вперед:

div {
направление анимации: альтернативно-обратное;
}

Попробуй сам »

Пример

Воспроизвести анимацию в обратном направлении:

div {
анимация-направление: реверс;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Анимация CSS

Ссылка на HTML DOM: свойство animationDirection

animation-direction — Ссылка CSS


Закрыть

CSS Ссылка бесплатно и всегда будет!

Добавьте нас в белый список блокировщика рекламы.

Спасибо!

Бесплатное визуальное руководство по CSS Создано @jgthms

Поделиться

Меню

Новинка! Моя 44-страничная электронная книга « CSS за 44 минуты » вышла! 😃

Получить сейчас →

В коллекции: анимации

Постоянная ссылка
Делиться
Могу ли я использовать
MDN

Определяет направление воспроизведения анимации.

]]]]]]]]]>]]]]]]>]]]]>]]>]]]]]]]]>]]]]]]>]]]]>]]>

по умолчанию

направление анимации: нормальное;

Анимация воспроизводится вперед . Когда он достигает конца, он начинается заново с первого ключевого кадра.

]]]]]]]]>]]]]]]]>]]]]>]]>

анимация-направление: обратное;

Анимация воспроизводится назад : начинается с последнего ключевого кадра, заканчивается на первом ключевом кадре.

]]]]]]]]>]]]]]]]>]]]]>]]>

анимация-направление: альтернативная;

Анимация воспроизводится сначала вперед , затем назад :

• начинается с первого ключевого кадра
• останавливается на последнем ключевом кадре
• начинается снова, но на последнем ключевом кадре
• останавливается на первом ключевом кадре

]]]]]]]]>]]]]]]]>]]]]>]]>

анимация-направление: альтернативно-обратное;

Анимация воспроизводится сначала назад , затем вперед :

• начинается с последнего ключевого кадра
• останавливается на первом ключевом кадре
• начинается снова, но в первом ключевом кадре
• останавливается на последнем ключевом кадре

]]]]]]]]>]]]]]]]>]]]]>]]>
]]]]]]]]>]]]]]]]>]]]]>]]>

CSS3 свойство animation-direction — Tutorial Republic

Тема: Справочник по свойствам CSS3 Пред. | След.

Описание

Свойство animation-direction CSS определяет, должна ли анимация воспроизводиться в обратном порядке в чередующихся циклах или нет.

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

Синтаксис

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

 направление анимации: 

В приведенном ниже примере показано свойство animation-direction в действии.

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: относительное;
    / * Chrome, Safari, Opera * /
    -webkit-имя-анимации: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: альтернативный;
    / * Стандартный синтаксис * /
    имя-анимации: moveit;
    продолжительность анимации: 4 с;
    количество итераций анимации: 2;
    направление анимации: альтернативное;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes moveit {
    от {left: 0;}
    на {left: 50%;}
}
 
/ * Стандартный синтаксис * /
@keyframes moveit {
    от {left: 0;}
    на {left: 50%;}
}  

Примечание: Свойство animation-direction не действует, если анимация настроена на однократное воспроизведение, см. Свойство animation-iteration-count .

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

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

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

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

Дополнительная литература

См. Учебник по теме: Анимация CSS3.

Связанные свойства и правила at: animation , animation-name , animation-delay , animation-time-function , animation-iteration-count , animation-direction , animation-fill -режим , , анимация-состояние воспроизведения , @keyframes .

анимация-направление · WebPlatform Docs

Сводка

Определяет, должна ли анимация выполняться в обратном порядке в некоторых или во всех циклах.

Обзорная таблица

Начальное значение

нормальный

Относится к

Все элементы, псевдоэлементы :: before и :: after.

Унаследовано

Нет

Медиа

визуальный

Расчетное значение

Как указано.

Анимационный

Нет

Свойство объектной модели CSS
:

В процентах

НЕТ

Синтаксис

• анимация-направление: альтернативное
• анимация-направление: альтернативное-обратное
• направление анимации: нормальное
• направление анимации: обратное

Значения

нормальный

Все итерации анимации воспроизводятся, как указано.

реверс

Все итерации анимации воспроизводятся в обратном направлении от того, как они были указаны. Когда анимация воспроизводится в обратном порядке, функции синхронизации также меняются местами. Например, при воспроизведении в обратном порядке анимация замедления будет казаться анимацией замедления.

запасной

Итерации цикла анимации, которые являются нечетными счетчиками, воспроизводятся в нормальном направлении, а итерации цикла анимации, которые являются четными счетчиками, воспроизводятся в обратном направлении, таким образом меняя направление каждого цикла.Счетчик, определяющий, является ли итерация четной или нечетной, начинается с единицы (нечетной).

чередование-реверс

Итерации цикла анимации, которые являются нечетными счетчиками, воспроизводятся в обратном направлении, а итерации цикла анимации, которые являются четными счетчиками, воспроизводятся в нормальном направлении, снова меняя направление каждого цикла. Счетчик для определения того, является ли итерация четной или нечетной, начинается с единицы (нечетной).

Примеры

Анимация с повторяющимся импульсом, при которой элемент сжимается и затемняется, а затем восстанавливается.Измените направление анимации с normal на другое значение ключевого слова, чтобы увидеть эффект.

  div.selected {
    имя-анимации: пульс;
    продолжительность анимации: 0,5 с;
    направление анимации: альтернативное;
    количество итераций анимации: бесконечно;
}

@keyframes pulse {
    из {
        преобразовать: масштаб (1) translateX (0);
        непрозрачность: 1;
    }
    к {
        преобразовать: масштаб (0,75) translateX (0);
        непрозрачность: 0,25;
    }
}
  

Посмотреть живой пример

Использование

  Также может быть список направлений, разделенных запятыми, например.g., reverse, normal, alternate, где каждое направление применяется к соответствующему порядковому значению позиции свойства animation-name.
  

Связанные спецификации

CSS-анимации

W3C Рабочий проект

См. Также

Другие статьи

Атрибуты

анимационное направление | Codrops

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

Вы можете указать одно или несколько значений направления анимации , разделенных запятыми. Когда вы предоставляете список значений, разделенных запятыми, этот список обычно сопоставляется со списком значений, предоставляемых другими свойствами, связанными с анимацией, такими как animation-delay , animation-time-function и animation- назовите объектов недвижимости, среди прочего. Каждый список значений в этих свойствах рассматривается как массив, где каждое значение в списке значений имеет свой собственный индекс.Затем каждое значение в списке значений сопоставляется с соответствующим значением с тем же индексом в списке, указанном в других свойствах.

Например, если вы предоставляете два значения animation-direction , то первое значение определяет направление анимации первой анимации в списке имен анимации, предоставленном animation-name , а второе направление определяет направление анимации вторая анимация.

Свойство animation-direction полезно и обычно используется вместе со свойством animation-iteration-count .Последний определяет, сколько раз цикл анимации должен быть повторен до окончания анимации, и когда цикл повторяется более одного раза, полезно разрешить воспроизведение анимации от конца назад к началу, чтобы избежать «прыжков» поведение между циклами. Подробности см. В записи свойства animation-iteration-count и в разделе живой демонстрации ниже.

Свойство animation-direction обычно указывается как часть сокращенного свойства animation .

Общая информация и примечания

Когда анимация воспроизводится в обратном порядке, функции синхронизации также меняются местами. Например, при воспроизведении в обратном направлении функция синхронизации анимации ускоренного входа будет казаться анимацией ускорения выхода .

Значения

нормальный

Все итерации анимации воспроизводятся, как указано. Это означает, что, когда первый цикл анимации закончится, анимация «перескочит» обратно к своему началу и начнется оттуда.

реверс

Все итерации анимации воспроизводятся в обратном направлении от того, как они были указаны. То есть анимация будет продолжаться от конца назад к началу, как если бы значения ключевых кадров были указаны в обратном порядке.

запасной

Итерации цикла анимации, которые являются нечетными счетчиками, воспроизводятся в нормальном направлении, а итерации цикла анимации, которые являются четными счетчиками, воспроизводятся в обратном направлении.Это означает, что первый цикл будет воспроизводиться от начала до конца, затем второй цикл будет воспроизводиться от конца до начала, затем третий цикл будет воспроизводиться от начала до конца и так далее.

чередование-реверс

Итерации цикла анимации, которые являются нечетными счетчиками, воспроизводятся в обратном направлении, а итерации цикла анимации, которые являются четными счетчиками, воспроизводятся в нормальном направлении. Первый цикл воспроизводится от конца назад к началу, затем второй - от начала до конца, третий - от конца к началу и так далее.

Банкноты

Чтобы определить, является ли итерация четной или нечетной, итерации начинают отсчет с 1.

Примеры

Следующее определяет направление анимации для элемента, анимация которого настроена на бесконечное повторение, что обеспечивает более плавный переход между циклами.

.element-2 {
    / * здесь другие свойства анимации... * /
    количество итераций анимации: бесконечно;
    направление анимации: альтернативное;
    / * ... * /
}
                 

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

.element {
    / * здесь другие свойства анимации ... * /
    количество итераций анимации: бесконечно;
    направление анимации: альтернативно-обратное;
    / *... * /
}
                 

См. Живой пример в разделе живых демонстраций ниже.

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

* обозначает обязательный префикс.

• Поддерживается:
• Да
• Нет
• Частично
• Polyfill

Статистика с caniuse.com

CSS3 animation-direction Свойство

Пример

Сделайте анимацию один раз, затем сделайте анимацию в обратном направлении:

div {
-webkit-animation-direction: альтернативный; / * Chrome, Safari,
Opera * /

направление анимации: альтернативное;
}

Попробуй сам "

Определение и использование

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

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следуют -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Синтаксис CSS

направление анимации: нормальное | обратное | альтернативное | альтернативное-обратное | начальное | наследование;

Стоимость недвижимости

Примечание: Значения «обратный» и «альтернативный-обратный» не поддерживаются в Safari.

Связанные страницы

Учебное пособие по CSS3: Анимация CSS3

Ссылка на HTML DOM: свойство animationDirection

CSS-анимация-направление

Свойство animation-direction используется, чтобы указать, будет ли анимация воспроизводиться вперед, назад или их комбинация.

CSS

 направление анимации: значение;
 

Анимации в CSS позволяют изменять состояние элемента. Хотя свойство animation-direction используется для указания направления анимации, существуют и другие свойства анимации, такие как animation-name , animation-duration , animation-time-function , animation-delay , счетчик-итераций анимации, режим заполнения-анимации и состояние воспроизведения-анимации .

См. Пример направления анимации Pen CSS от Aakhya Singh (@aakhya) на CodePen.

Нажмите кнопку ПОВТОР в приведенной выше демонстрации, чтобы просмотреть анимацию с самого начала.

Примечание: Чтобы анимация была эффективной, необходимо определить свойство animation-duration , поскольку длительность анимации по умолчанию равна нулю.

Значения

нормальный : Анимация воспроизводится в прямом направлении (как обычно).

в обратном направлении : Анимация воспроизводится в обратном направлении.

альтернативный : Анимация сначала воспроизводится в прямом, а затем в обратном направлении.

альтернативно-обратный : Анимация воспроизводится сначала в обратном, а затем в прямом направлении.

начальный : устанавливает значение свойства по умолчанию.

наследовать : наследует значение от родительского элемента.

Примеры

В следующем примере анимация с именем «карусель» определяется с помощью @keyframes , которая поворачивает объект на 360 градусов по часовой стрелке вдоль оси Z.Когда эта анимация применяется к изображениям, продолжительность одного цикла анимации устанавливается равной 2 секундам, а счетчик итераций циклов анимации устанавливается на бесконечность.

Посмотрите на эффект различных значений animation-direction на анимации. Префикс -webkit- используется для лучшей поддержки браузером.

См. Пример направления анимации Pen CSS от Aakhya Singh (@aakhya) на CodePen.

Нажмите кнопку ПОВТОР в приведенной выше демонстрации, чтобы просмотреть анимацию с самого начала.