CSS animation-iteration-count — скільки разів повторити анімацію

Властивість animation-iteration-count визначає скільки разів програвати цикл анімації до її зупинки.

Наприклад, якщо задати для властивості значення 5 - анімація програватиметься 5 циклів.

Значення infinite робить демонстрацію анімації нескінченною. Якщо для властивості прописано більше за одне значення, кожен раз коли програється анімація, використовується наступне у списку значення по черзі. Після останнього значення, браузер повертається до першого.

На цьому прикладі, ми можемо побачити, що блок з animation-iteration-count: 2; зупиняється, а блок з animation-iteration-count: 15; продовжує ще програватися:

правити

Загальний опис

правити

Нотатка

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість animation-iteration-count може отримувати 4 значень:

number

Скільки разів повинна повторюватися анімація. Негативні значення не припустимі. Можна використовувати числа менше одиниці, для прикладу 0.5 означатиме половину циклу анімації

автор: Svitlana

правити

infinite

Анімація повторюється нескінченно

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	43	16	9	30	12	10

Підтримка: мобільні переглядачі

Переглядач
	43	43	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box three">3 рази</div>
<div class="box forever">infinite</div>

.box {
    width: 200px;
    padding: 8px;
    margin-bottom: 8px;
    color: #fff;
    position: relative;
    animation: mymove 2s;
}

.three {
    animation-iteration-count: 3;
    background: #0172ad;
}

.forever {
    animation-iteration-count: infinite;
    background: #d81b60;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 160px; }
}

<p class="block block-1"><code>animation-iteration-count: 2;</code></p>

<p class="block block-2"><code>animation-iteration-count: 15;</code></p>

body {
  line-height: 1.45;
  font-family: Ubuntu, sans-serif;
  font-size: 17px;
  color: #252525;
}

.block {
  padding: 16px; 
  animation-name: jump;
  animation-duration: 1.75s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-direction: alternate;
  animation-fill-mode: both; 
}

.block..block-1 {
  animation-iteration-count: 2;
}

.block.block-2 {
  animation-iteration-count: 15;
}

@keyframes jump {
  from {
    margin-top: 0;
    background-color: #666;
    color: #f1f1f1;
  }
  to {
    margin-top: 15%;
    background-color: #808080;
    color: #252525;
  }
}

<p>Різні значення для <code>animation-iteration-count</code> у дії:</p>

<button id="btn">Запустити анімацію</button>

<hr>

<div class="wrapper">
  <div class="block block-1">
    <span>1</span>
  </div>
  <div class="block block-2">
    <span>4</span>
  </div>
  <div class="block block-3">
    <span>10</span>
  </div>
  <div class="block block-4">
    <span>infinite</span>
  </div>
</div>

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

@keyframes animate {
  
  from { 
    margin-top: 50px; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 26px 8px;
  width: 125px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  
  animation-name: animate;
  animation-duration: 1.25s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-play-state: paused;
}

.block-1 {
  animation-iteration-count: 1;
}
.block-2 {
  animation-iteration-count: 4;
}
.block-3 {
  animation-iteration-count: 10;
}
.block-4 {
  animation-iteration-count: infinite;
}

var blocks = document.getElementsByClassName('block');
var btn = document.getElementById('btn');

btn.onclick = function () {
  for (var i = 0; i < blocks.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    blocks[i].style.animationPlayState = 'running';
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js