Animation-iteration-count

Animation-iteration-count: устанавливает количество раз, которое будет проигрываться анимация. 

Возможные значения:

  • - определенное количество итераций (по умолчанию - 1);
  • infinite - анимация повторяется навсегда;
  • initial - устанавливает счетчик итераций по умолчанию;
  • inherit - наследует значение от родительского

Например, 

.

Синтаксис CSS:

animation-iteration-count: 2

Синтаксис сокращения анимации (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count];
animation:  bounceIn 2s ease-in-out 3s 2; 

Animation-direction

Animation-direction: свойство определяет направление движения анимации (вперед, назад или в альтернативных циклах).

Возможные значения:

  • normal (по умолчанию) - анимация воспроизводится вперед. На каждом цикле анимация сбрасывается до начального состояния (0%) и снова воспроизводится (до 100%).
  • reverse - анимация воспроизводится в обратном направлении. На каждом цикле анимация сбрасывается до конечного состояния (100%) и воспроизводится в обратном направлении (до 0%).
  • alternate - анимация меняет направление на каждый цикл. В каждом нечетном цикле анимация воспроизводится вперед (от 0% до 100%). На каждом четном цикле анимация воспроизводится в обратном направлении (от 100% до 0%).
  • alternate-reverse - анимация меняет направление на каждый цикл. В каждом нечетном цикле анимация воспроизводится в обратном порядке (от 100% до 0%). На каждом четном цикле анимация воспроизводится вперед (0% или 100%).

Синтаксис CSS:

animation-direction: alternate;

Синтаксис сокращения анимации (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];
animation:  bounceIn 2s ease-in-out 3s 3 alternate;

Например,

Последние статьи из раздела "Про Дизайн (CSS и анимация)":

Возможно Вам будут интересны другие статьи из разделов:

Интересно, полезно? Поделитесь у себя:



comments powered by HyperComments