Animation iteration count: animation-iteration-count — CSS

Animation iteration count: animation-iteration-count — CSS | MDN

Содержание

animation-iteration-count — CSS | MDN

Experimental

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

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

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

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

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

Значения

infinite: Анимация повторяется бесконечно.
<number>: Сколько раз анимация будет повторяться; по-умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).

Правила синтаксиса

Возможность	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Базовая поддержка	(Да)-webkit 43.0	5.0 (5.0)-moz 16.0 (16.0)	10	12 -o 12.10	4.0-webkit

Возможность	Android	Chrome	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Базовая поддержка	(Да)-webkit	?	5.0 (5.0)-moz 16.0 (16.0)	?	?	?	43.0

animation-iteration-count | CSS (Примеры)

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

Переходы и Анимации

Синтаксис

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

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

Значения

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

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

animation-iteration-count: 1;

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

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

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

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

Описание и примеры

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

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

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-iteration-count.
Opera до версии 12.10 поддерживает свойство -o-animation-iteration-count.
Firefox до версии 16 поддерживает свойство -moz-animation-iteration-count.

Свойство animation-iteration-count | CSS справочник

CSS свойства

Определение и применение

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

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации — animation, чтобы установить все свойства анимации в одном объявлении.

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

CSS синтаксис:

animation-iteration-count:"number | infinite | initial | inherit";

JavaScript синтаксис:

object.style.animationIterationCount = "5"

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

Значение	Описание
number	Число, которое определяет какое количество раз анимация должна быть воспроизведена (сколько раз будет проигрываться анимационный цикл). Значение по умолчанию 1. Отрицательные значения не допускаются, но при этом допускается использование не целых значений, при этом будет проигрываться только часть анимационного цикла — пропорционально указанному значению (например, значение 1.5 соответствует воспроизведению анимационного цикла полтора раза).
infinite	Указывает, что анимация должна проигрываться бесконечно.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Повторение анимации в CSS</title>
<style> 
 div {
width: 50px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
border-radius: 100%;  /* определяем форму углов элемента (скругляем) */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
color : white; /* устанавливаем цвет шрифта белый */
padding : 15px; /* устанавливаем внутренние отступы элемента со всех сторон */
position: relative;  /* элементы с относительным позиционированием (для возможности смещения) */
text-align: center;  /* выравниваем текст по центру */
line-height: 50px;  /* устанавливаем высоту строки */
animation-duration: 1.5s;  /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
} 
 .test {
animation-iteration-count: 1;  /* указываем, что анимация будет повторяться 1 раз  */
} 
.test2 {
animation-iteration-count: 2;  /* указываем, что анимация будет повторяться 2 раза  */
} 
.test3 {
animation-iteration-count: 3.5;  /* указываем, что анимация будет повторяться 3 с половиной раза  */
} 
.test4 {
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
} 
@keyframes iliketomoveit {   /* устанавливаем ключевые кадры  */
	0%   {top: 0px;} 
	25%  {top: 200px; background: red;} 
	75%  {top: 100px;} 
	100% {top: 0px; background: black;} 
	} 
</style>
</head>
	<body>
		<div class = "test">1</div>
		<div class = "test2">2</div>
		<div class = "test3">3.5</div>
		<div class = "test4">infinite</div>
	</body>
</html>

Пример использования CSS свойства animation-iteration-count (повторение анимации).CSS свойства

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

CSS свойство animation-iteration-count определяет, сколько раз должна проигрываться анимация. Свойство имеет две значения: number и infinite. Значение по умолчанию — 1, но можно использовать и другие числа. 0 или отрицательные значения недопустимы. Если анимация установлена с помощью значения infinite, она будет проигрываться бесконечно.

Значение по умолчанию	1
Применяется	Ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.animationIterationCount = «infinite»;

Синтаксис¶

animation-iteration-count: number | infinite | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html, body {
      margin: 0;
      padding: 0;
      }
      div { 
      position: relative;
      width: 100px;
      height: 100px;
      margin: 30px 0;
      border-radius: 50%;
      animation-name: pulse;
      }
      .element-one { 
      background-color: #1c87c9;
      animation-duration: 3s;
      animation-iteration-count: 3;
      }
      .element-two {
      margin: 0;
      background-color: #83bf42;
      animation-duration: 5s;
      animation-iteration-count: 2;
      }
      @keyframes pulse {
      0% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h3>Пример animation-iteration-count</h3>
    <p>Свойство animation-iteration-count определяет, сколько раз будет проигрываться анимационный цикл до её остановки.</p>
    <div></div>
    <div></div>
  </body>
</html>

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

Пример, где анимация проигрывается бесконечно:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html, body {
      margin: 0;
      padding: 0;
      }
      div { 
      position: relative;
      width: 100px;
      height: 100px;
      margin: 30px 0;
      border-radius: 50%;
      animation-name: pulse;
      }
      .element-one { 
      background-color: #1c87c9;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      }
      .element-two {
      margin: 0;
      background-color: #83bf42;
      animation-duration: 5s;
      animation-iteration-count: 2;
      }
      @keyframes pulse {
      0% { left: 0; }
      50% { left: 50%; }
      100% { left: 0; }
      }
    </style>
  </head>
  <body>
    <h3>Пример animation-iteration-count</h3>
    <p>Свойство animation-iteration-count определяет, сколько раз будет проигрываться анимация до её остановки.</p>
    <div></div>
    <div></div>
  </body>
</html>

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

Значения¶

Значение	Описание
number	Определяет, сколько раз будет проигрываться анимация. Значение по умолчанию — 1.
infinite	Анимация проигрывается бесконечно.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

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


43.0+ 4.0-42.0 -webkit-	12.0+	16.0+ 5.0-15.0 -moz-	9.0+ 5.1-8.0 -webkit-	12.0+ 15.0-29.0 -webkit-

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

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

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

Синтаксис

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

Значения

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

Пример

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

div {
animation-iteration-count: 2;
}

Подробнее примеры ниже.

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

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

Значение по умолчанию:	1
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.animationIterationCount=»infinite»

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

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

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Свойство
animation-iteration-count	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Синтаксис CSS

animation-iteration-count: number|infinite|initial|inherit;

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

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

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

Пример

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

div {
animation-iteration-count: infinite;
}

animation-iteration-count | Справочник CSS | schoolsw3.com

Обновляется!!! Справочник JavaScript

Пример

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

div {
animation-iteration-count: 2;
}

Попробовать »

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

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

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

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

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

Свойство
animation-iteration-count	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS Синтаксис

animation-iteration-count: number|infinite|initial|inherit;

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

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

Примеры

Пример

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

div {
animation-iteration-count: infinite;
}

Попробовать »

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

CSS учебник: CSS Animations

HTML DOM Справочник: Свойство animationIterationCount

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

Пример

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

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

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

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

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

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

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

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

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

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

Объект
количество итераций анимации	43,0 4,0 -webkit-	10,0	16,0 5,0 -моз-	9,0 4,0 -webkit-	30,0 15,0 -webkit- 12,0 -o-

Синтаксис CSS

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

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

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

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

Пример

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

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

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

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

Учебник

CSS: Анимация CSS

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

счетчик-итераций анимации — CSS: каскадные таблицы стилей

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

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Часто удобно использовать сокращенное свойство animation для одновременной установки всех свойств анимации.

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


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


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

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

Значения

бесконечно: Анимация будет повторяться вечно.
<номер>: Количество повторов анимации; По умолчанию это 1 .Вы можете указать нецелые значения для воспроизведения части цикла анимации: например, 0,5 будет воспроизводить половину цикла анимации. Отрицательные значения недопустимы.

  <количество-единственной-анимации> # где <количество-единственной-анимации> = бесконечно | <число>

Анимация будет запущена 10 раз.

HTML

CSS

  .box {
  цвет фона: rebeccapurple;
  радиус границы: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  имя-анимации: повернуть;
  продолжительность анимации: 0.7 с;
  количество итераций анимации: 10;
}

@keyframes rotate {
  0% {
    преобразовать: повернуть (0);
  }
  100% {
    преобразовать: повернуть (360 градусов);
  }
}

См. Примеры анимации CSS.

Таблицы BCD загружаются только в браузер

animation-iteration-count | Codrops

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

Начальное значение — «1», что означает, что анимация будет воспроизводиться от начала до конца один раз.

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

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

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

Свойство animation-iteration-count обычно устанавливается как часть сокращенного свойства animation .

Значения

бесконечное: Анимация будет повторяться бесконечно.
<номер>: Анимация будет повторяться указанное количество раз. Если число не целое, анимация завершится на полпути к последнему циклу. Отрицательные числа недействительны. Значение «0» является допустимым и, подобно длительности анимации «0 с», вызывает мгновенное появление анимации.

Примеры

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

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

Live Demo

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

Посмотреть эту демонстрацию на игровой площадке Codrops

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

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

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

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

анимация | CSS-уловки

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет , цвет фона , высота или ширина . Каждую анимацию необходимо определить с помощью at-правила @keyframes , которое затем вызывается с помощью свойства animation , например:

  .element {
  анимация: пульс 5с бесконечный;
}

@keyframes pulse {
  0% {
    цвет фона: # 001F3F;
  }
  100% {
    цвет фона: # FF4136;
  }
}

Каждое @keyframes at-правило определяет, что должно происходить в определенные моменты во время анимации.Например, 0% — это начало анимации, а 100% — конец. Эти ключевые кадры затем могут управляться либо сокращенным свойством animation , либо его восемью под-свойствами, чтобы дать больше контроля над тем, как эти ключевые кадры должны управляться.

Субобъекты

имя-анимации : объявляет имя @keyframes at-правила, которым нужно управлять.
animation-duration : продолжительность одного цикла анимации.
функция синхронизации анимации : устанавливает предустановленные кривые ускорения, такие как легкость или линейная .
animation-delay : время между загрузкой элемента и началом анимационной последовательности (классные примеры).
animation-direction : устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
animation-iteration-count : количество раз, когда должна быть выполнена анимация.
animation-fill-mode : устанавливает, какие значения применяются до / после анимации.
Например, вы можете установить последнее состояние анимации, чтобы оно оставалось на экране, или вы можете настроить его так, чтобы оно возвращалось к предыдущему состоянию, когда анимация началась.
animation-play-state : приостановить / воспроизвести анимацию.

Эти подсвойства можно использовать следующим образом:

  @keyframes stretch {
  / * здесь объявляем действия анимации * /
}

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

/ *
  такой же как:
* /

.element {
  анимация:
    протяжение
    1,5 с
    облегчение
    0 с
    чередовать
    бесконечный
    никто
    Бег;
}

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

`функция синхронизации анимации`	легкость, легкость выхода, легкость входа, легкость входа, линейная, кубическая кривая Безье (x1, y1, x2, y2) (e.грамм. cubic-bezier (0.5, 0.2, 0.3, 1.0))
`продолжительность анимации`	Xs или Xms
`задержка анимации`	Xs или Xms
`итерация анимации- count`	X
`animation-fill-mode`	вперед, назад, оба, нет
`animation-direction`	normal, alternate
`animation-play-state`	приостановлено, выполняется, выполняется

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0% и 100% внутри @keyframes :

  @keyframes pulse {
  0%, 100% {
    цвет фона: желтый;
  }
  50% {
    цвет фона: красный;
  }
}

Несколько анимаций

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

  .element {
  анимация:
    импульс 3 с ослабление бесконечное чередование,
    nudge 5s линейный бесконечный альтернативный;
}

Производительность

Анимация большинства свойств — это проблема производительности, поэтому мы должны проявлять осторожность, прежде чем анимировать какое-либо свойство. Однако есть определенные комбинации, которые можно безопасно анимировать:

transform: translate ()
transform: scale ()
transform: rotate ()
opacity

Какие свойства можно анимировать?

MDN имеет список свойств CSS, которые можно анимировать.Анимируемые свойства имеют тенденцию к цвету и числам. Примером неанимируемого свойства является background-image .

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

Desktop

Chrome	Firefox	IE	Edge	Safari
4 *	5 *	10	12	5,1 *

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	4 *	6.0-6,1 *

Дополнительная информация

CSS | свойство animation-iteration-count — GeeksforGeeks

< html >

< Головка >

< титул >

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

титул >

< стиль >

.вундеркинды {

размер шрифта: 40 пикселей;

выравнивание текста: по центру;

начертание шрифта: полужирный;

цвет: # 090;

padding-bottom: 5px;

семейство шрифтов: Times New Roman;

}

.geeks1 {

размер шрифта: 17 пикселей;

начертание шрифта: полужирный;

выравнивание текста: по центру;

семейство шрифтов: Times New Roman;

}

#one {

имя-анимации: пример;

продолжительность анимации: 2 с;

/ * Анимация будет повторяться дважды * /

количество итераций анимации: 2;

}

# два {

имя-анимации: пример;

продолжительность анимации: 2 с;

/ * Анимация будет повторяться бесконечно * /

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

}

@keyframes, пример {

из {

цвет фона: оранжевый;

}

по {

цвет фона: белый;

}

стиль >

головка >

< корпус >

< div класс = «гики» >

GeeksforGeeks

div >

< div класс = "geeks1" >

Портал информатики для гиков

div >

< h3 id = «один» >

Этот текст меняет свой цвет два раза.

h3 >

< h3 id = «два» >

Этот текст меняет свой цвет бесконечное количество раз.

h3 >

корпус >

html >

`CSS3 свойство animation-iteration-count - Tutorial Republic`

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

`Описание`

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

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

`Синтаксис`

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

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

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

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

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

Значение	Описание
номер	Указывает, сколько раз должна повторяться анимация. Значение по умолчанию - 1. Отрицательные значения не допускаются.
`бесконечное`	Анимация будет повторяться бесконечно, т.е. бесконечное количество раз.
`начальный`	Устанавливает для этого свойства значение по умолчанию.
`наследовать`	Если указано, связанный элемент принимает вычисленное значение свойства счетчика анимаций `своего родительского элемента.`

Примечание: Вы можете указать нецелые значения, такие как 0,5 , 0,75 и т. Д., Чтобы воспроизвести только часть цикла анимации, например значение 0,5 будет воспроизводить половину цикла анимации.

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

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

Базовая поддержка -

Firefox 5+ ^-moz-, 15+
Google Chrome 4+ ^-webkit-
Internet Explorer 10+
Apple Safari 4+ ^-webkit-
Opera 12+ ^-o-, 15+ ^-webkit-

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

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

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

`счетчик-итераций анимации · Документы WebPlatform`

`Сводка`

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

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

Начальное значение: 1
Применимо к: Все элементы, псевдоэлементы :: before и :: after.
Унаследовано: Нет
Медиа: визуальный
Расчетное значение: Как указано.
Анимационный: Нет

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

В процентах: НЕТ

`Синтаксис`

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

`Значения`

<количество итераций одной анимации>: Анимация воспроизводится указанное количество раз.Также может быть список счетчиков, разделенных запятыми, например, 5, 2, 10 , где каждая длительность применяется к соответствующему порядковому значению позиции свойства animation-name. Отрицательные значения не допускаются. Вы можете указать нецелые значения для воспроизведения части цикла анимации (например, 0,5 будет воспроизводить половину цикла анимации).
бесконечное: Бесконечно повторять анимацию.

`Примеры`

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

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

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

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

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

  Это свойство принимает нецелые значения, например 1.5 или 2,75. Если указано нецелое значение, анимация завершается в середине цикла. Отрицательные числа недействительны.

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

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

CSS-анимации: W3C Рабочий проект

`См. Также`

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

`Внешние ресурсы`

`Атрибуты`

.No related posts.

`alexxlab`

Разное

`Как часто можно делать клизму грудничку: рекомендации педиатров`

Разное

`Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы`

Разное

`Как успокоить плачущего ребенка: 10 эффективных способов`

Разное

`Что нужно новорожденному на первое время: полный список необходимых вещей`

Разное

`Пеленки для новорожденных: виды, размеры и способы использования`

Разное