JS властивість CSSStyleDeclaration.animationIterationCount

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

animationIterationCount є властивістю CSS, яка в JavaScript використовується для визначення кількості разів, скільки разів анімація має відтворитися на елементі. Ця властивість є корисною для керування циклічністю анімацій, що може бути необхідним у випадках, коли потрібно чітко контролювати повторюваність анімаційного ефекту на веб-сторінці.

Властивість animationIterationCount приймає як числові значення, так і спеціальне значення infinite. Числові значення визначають точну кількість повторень анімації, а значення infinite встановлює безкінечне повторення.

Для того, щоб використати animationIterationCount, спочатку необхідно звернутися до конкретного елемента на сторінці. Це можна зробити за допомогою різних методів вибору елементів, таких як document.getElementById, document.querySelector або інші. Після вибору елемента, можна встановити або змінити значення цієї властивості.

Розглянемо базовий приклад використання animationIterationCount. Припустимо, ми маємо HTML-елемент з id "box":

<div id="box"></div>

У CSS визначено анімацію для цього елемента:

@keyframes exampleAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: exampleAnimation;
  animation-duration: 2s;
}

Тепер, використовуючи JavaScript, ми можемо встановити кількість повторень анімації:

var box = document.getElementById('box');
box.style.animationIterationCount = '3';

У цьому прикладі анімація exampleAnimation буде відтворена три рази.

Далі розглянемо більш складний приклад, який демонструє встановлення безкінечного повторення анімації:

var box = document.getElementById('box');
box.style.animationIterationCount = 'infinite';

У цьому випадку анімація exampleAnimation буде повторюватися безкінечно.

Варто також зазначити, що властивість animationIterationCount можна задавати і в CSS, але JavaScript надає можливість динамічного керування цією властивістю під час виконання сценарію. Це дозволяє змінювати поведінку анімації залежно від певних умов або подій.

Наприклад, можна змінювати кількість повторень анімації в залежності від подій, таких як натискання кнопки:

<button id="repeatButton">Repeat Animation</button>
<div id="box"></div>

var box = document.getElementById('box');
var button = document.getElementById('repeatButton');

button.addEventListener('click', function() {
  box.style.animationIterationCount = '5';
});

У цьому прикладі при натисканні кнопки Repeat Animation анімація елемента box буде відтворена п'ять разів.

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

var box = document.getElementById('box');

window.addEventListener('resize', function() {
  if (window.innerWidth < 600) {
    box.style.animationIterationCount = '2';
  } else {
    box.style.animationIterationCount = 'infinite';
  }
});

Тут, якщо ширина вікна браузера менша за 600 пікселів, анімація повториться двічі; якщо ж ширина більша — анімація буде повторюватися безкінечно.

Завдяки властивості animationIterationCount, можна легко контролювати кількість повторень анімацій, що надає додаткову гнучкість при розробці динамічних та інтерактивних веб-сторінок.

правити

Порада

Якщо потрібно, щоб анімація повторювалася нескінченну кількість разів, встановіть animationIterationCount на значення infinite. Це корисно для створення безперервних анімацій, таких як іконка завантаження.

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

Порада

Для більш складних анімацій можна використовувати @keyframes у CSS та встановити animation замість прямого редагування animationIterationCount. Це забезпечує більшу гнучкість та керованість анімацією.

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

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

Синтаксис

element.style.animationIterationCount

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

Переглядач
	4.4	18	4	1

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

Переглядач
	-	-

Приклади

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

<div id="myDiv"></div>

@keyframes moveX {
    0%   { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

#myDiv {
    width: 50px;
    height: 50px;
    background-color: red;
    animation: moveX 2s infinite;
}

const div = document.getElementById('myDiv');

div.style.animationIterationCount = '3'; // рівно три цикли — і стоп

<div id="myDiv"></div>
<p>Клацни квадрат, щоб перемкнути нескінченний/одноразовий цикл.</p>

@keyframes rotateZ {
    0%   { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

#myDiv {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: rotateZ 2s infinite;
}

const div = document.getElementById('myDiv');

function toggleAnimation() {
    const current = div.style.animationIterationCount;
    div.style.animationIterationCount = current === 'infinite' ? '1' : 'infinite';
    console.log('animation-iteration-count:', div.style.animationIterationCount);
}

div.addEventListener('click', toggleAnimation);