Iteration count animation: animation-iteration-count — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

Содержание

animation-iteration-count | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.

Значение по умолчанию1
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after
АнимируетсяНет

Синтаксис 

animation-iteration-count: infinite | <число>

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

infinite
Анимация повторяется бесконечно.
<число>
Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>animation-iteration-count</title> <style> .blink { animation: blink 1s; animation-iteration-count: infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <div>Мигающий текст привлекает к себе внимание, не правда ли.</div> </body> </html>

В данном примере установлено бесконечное мигание выбранного текста.

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

объект.style.animationIterationCount

Примечание

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

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

Firefox до версии 16 поддерживает свойство -moz-animation-iteration-count.

Спецификация

СпецификацияСтатус
CSS Animations Level 1Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

10123431212.1049516
25161212.1049.2

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

Анимация

См. также

  • @keyframes
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-name
  • animation-play-state
  • animation-timing-function
  • Анимация в CSS
  • Переходы и анимация

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Свойство animation-iteration-count — количество повторов анимации

Свойство animation-iteration-count

задает количество повторов анимации. По умолчанию анимации повторится только 1 раз и затем вернется в исходное состояние. Однако, animation-iteration-count позволяет задать определенное число повторений или вообще задать бесконечное повторение.

Можно задавать дробные значения — в этом случае анимация проиграется лишь частично.

Синтаксис

селектор { animation-iteration-count: целое или дробное число | infinite; }

Значения

ЗначениеОписание
Число Заданное количество повторений, после совершения которых анимация остановится. Положение, которое она займет, регулируется свойством animation-fill-mode. Можно задавать
дробные значения — в этом случае анимация проиграется лишь частично.
infiniteАнимация будет повторятся бесконечно.

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

Пример . Конечное число повторений

В данном примере анимация повторится только 3 раза, а затем вернется в исходное состояние:

<div></div>@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { animation-duration: 3s; animation-name: move; animation-iteration-count: 3; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Пример .

Значение infinite

А сейчас анимация будет повторятся бесконечно:

<div></div>

@keyframes move { from { margin-left: 0px; } to { margin-left: 400px; } } #elem { 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-direction,
    которое задает направление анимации
  • свойство animation-fill-mode,
    которое задает состояние анимации
  • свойство animation-play-state
    ,
    которое позволяет поставить анимацию на паузу
  • свойство animation,
    представляющее собой сокращение для анимаций
  • команду @keyframes,
    задающую ключевые кадры анимации
  • плавные переходы transition, представляющие собой анимацию по наведению на элемент

CSS animation-iteration-count Свойство

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

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

div {
число итераций анимации: 2;
}

Попробуйте сами »

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

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

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

Значение по умолчанию: 1
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.animationIterationCount=»бесконечный» Попытайся

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

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

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

Собственность
количество итераций анимации 43. 0
4.0 -вебкит-		 10,0
16,0
5,0 -моз-		 9.0
4.0 -вебкит-		 30,0
15,0 -webkit-
12,0 -o-

Синтаксис CSS

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

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

.
Значение Описание Демо
номер Число, определяющее, сколько раз должна воспроизводиться анимация. Значение по умолчанию: 1 Играй »
бесконечный Указывает, что анимация должна воспроизводиться бесконечное количество раз (навсегда) Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

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

Пример

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

раздел {
количество итераций анимации: бесконечно;
}

Попробуйте сами »

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

Учебник CSS: Анимации CSS

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

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


8 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS animation-iteration-count, объяснение

  • Блог Hubspot
  • HubSpot. com

Загрузка

    О нет! Мы не смогли найти ничего подобного.

    Попробуйте еще раз поискать, и мы постараемся.

    Джейми Джувилер

    Обновлено:

    Опубликовано:

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

    Однако этого не происходит. По умолчанию анимация выполняется один раз, а затем останавливается. Итак, что, если мы хотим, чтобы наша анимация повторялась несколько раз или бесконечно для чего-то вроде анимации загрузки? Для этого нам нужно задать количество итераций с помощью animation-iteration-count свойство.

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

    Что такое количество итераций анимации?

    CSS-свойство animation-iteration-count указывает, сколько раз будет воспроизводиться последовательность анимации. Если количество итераций конечно, анимация остановится после указанного количества циклов. Правило записывается следующим образом:

     
     количество итераций анимации: бесконечно | <номер> | начальная | наследовать;

    animation-iteration-count Значения

    Свойство animation-iteration-count может принимать несколько значений. Его основными значениями являются бесконечное и <число> , а также свойство принимает глобальные значения начальное и наследуемое . Давайте пройдемся по каждому из них сейчас.

    бесконечный

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

    См. количество итераций анимации пера: бесконечность Кристины Перриконе (@hubspot) на CodePen.

     

    <число>

    Числовое значение для animation-iteration-count заставляет анимацию повторяться указанное количество раз. Например, значение 3 заставит анимацию повторяться три раза.

    См. Pen animation-iteration-count: number Кристины Перриконе (@hubspot) на CodePen.

    Если значение для animation-iteration-count  не указано, это значение по умолчанию равно 1 , и анимация повторяется один раз. Значение 0 предотвращает воспроизведение анимации.

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

    См. число итераций анимации пера: десятичное число Кристины Перриконе (@hubspot) на CodePen.

     

    начальный

    Значение начальное устанавливает значение по умолчанию для animation-iteration-count , 1 .

    наследовать

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

    Несколько значений для счетчика итераций анимации

    В приведенных выше примерах мы присвоили только одно значение animation-iteration-count , но это свойство (как и другие свойства анимации CSS) также может обрабатывать несколько значений. Это позволяет назначать разное количество итераций разным анимациям.

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

     
     количество итераций анимации: 3, 5, бесконечно;

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

    Вот пример использования нескольких анимационных итераций для трех различных анимированных свойств:

    См. Pen animation-iteration-count: несколько значений Кристины Перриконе (@hubspot) на CodePen.

     

    Сокращение CSS для числа итераций анимации

    Вы также можете указать количество итераций анимации, используя сокращенное свойство CSS анимация , чтобы использовать меньше строк кода. Например, в следующем коде:

     
     анимация: пример 3s 2s 5 легкость;

    … значение 5 устанавливает количество итераций анимации.

    См. число итераций анимации пера: стенограмма Кристины Перриконе (@hubspot) на CodePen.

     

    Зацикливание анимаций CSS

    С помощью всего лишь дополнительной строки CSS можно легко зациклить анимацию до бесконечности для заданного количества итераций. Например, вы можете применить легкое движение, чтобы элемент «зависал» на странице, или применить забавный эффект встряхивания к нажатию кнопки. У вас есть обширный контроль над анимацией и стилем, и это то, что касается CSS.

    Темы: CSS-анимация

    Не забудьте поделиться этим постом!

    Связанные статьи

    • Как создать анимацию набора текста в CSS [Пошаговое руководство]

      15 ноября 2022 г.

    • Что такое CSS-анимация при наведении курсора и как ее использовать?

      14 ноября 2022 г.

    • Как добавить анимацию плавного перехода CSS к тексту, изображениям, прокрутке и наведению

      07 июня 2022 г.

    • CSS Margin и Padding: в чем разница?

      06 января 2022 г.

    • Полное руководство по анимации в CSS

      21 сент. 2021 г.

    • Функция синхронизации CSS-анимации: как ее использовать + 9 примеров

      10 сент. 2021 г.

    • hubspot.com/website/css-transition-vs-animation»>

      Основное различие между CSS-анимацией и переходами

      10 сент. 2021 г.

    • CSS-анимация не работает? Попробуйте эти исправления

      08 сент. 2021 г.

    • Свойство CSS animation-direction, объяснение

      02 сент.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *