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, можна легко контролювати кількість повторень анімацій, що надає додаткову гнучкість при розробці динамічних та інтерактивних веб-сторінок.

Синтаксис

element.style.animationIterationCount

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

<script>
const div = document.getElementById('myDiv');
div.style.animationIterationCount = '3'; // Анімація відтворюватиметься 3 рази
</script>

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

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

<script>
const div = document.getElementById('myDiv');

// Функція для перемикання між нескінченним і одноразовим циклом анімації
function toggleAnimation() {
  const currentValue = div.style.animationIterationCount;
  div.style.animationIterationCount = currentValue === 'infinite' ? '1' : 'infinite';
}

div.addEventListener('click', toggleAnimation);
</script>