⑦ Повтор анимации: свойство animation-iteration-count

Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-анимацию
• ② Ключевые кадры
• ③ Временная функция для ключевых кадров
• ④ Название анимации: свойство animation-name
• ⑤ Продолжительность анимации: свойство animation-duration
• ⑥ Временная функция: свойство animation-timing-function

Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction, которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.

Свойство не наследуется.

animation-iteration-count

Значения:

• infinite - Анимация проигрывается бесконечно.
• число - Анимация будет повторяться указанное количество раз. Если число не является целым числом, анимация закончится в середине последнего цикла. Отрицательные числа недействительны. Значение 0 вызывает мгновенное срабатывание анимации.

Синтаксис

CSS

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.5;
animation-iteration-count: 2, 0, infinite;

Продолжение в следующей статье!