CSS :: Свойство animation-iteration-count
css-свойство animation-iteration-count (от англ. animation iteration count – количество повторений анимации) задает количество повторений анимации.
Характеристики
- Значение по умолчанию: 1.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.animationIterationCount="value".
Синтаксис
animation-iteration-count: <положительное число> | infinite
Значения
В качестве значений принимает либо положительное число, указывающее количество повторений, либо ключевое слово infinite, означающее воспроизведение анимации бесконечное число раз. При этом разрешается использовать не только целые значения, но и дробные. Например, если значение равно 1.5, то анимация совершит один полный цикл и потом завершится на половине второго цикла. По умолчанию анимация воспроизводится только один раз.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-iteration-count
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-iteration-count
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 3em; overflow: hidden; white-space: nowrap; padding: 1em; width: 460px; height: 50px; border: solid 4px red; } /* Задаем общие свойства анимации */ .anim{ animation-name: example_1; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: 2s; animation-direction: alternate; animation-fill-mode: backwards; } /* Задаем число повторений анимации */ .anim_count_1{ animation-iteration-count: 1; } .anim_count_2{ animation-iteration-count: infinite; } /* Анимируем ширину элемента */ @keyframes example_1{ from{ width: 0px; } to{ width: 500px; } } </style> </head> <body> <div class="anim anim_count_1">animation-iteration-count: 1</div> <div class="anim anim_count_2">animation-iteration-count: infinite</div> </body> </html>
Пример №1