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

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

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

Використання animationDelay є досить простим, і її можна застосувати до будь-якого елемента, який має визначену анімацію. Ця властивість приймає значення у вигляді строк, які вказують на час затримки в секундах (s) або мілісекундах (ms).

Найпростіший приклад використання animationDelay виглядає наступним чином:

const element = document.getElementById("myElement");
element.style.animationDelay = "2s";

У цьому прикладі анімація для елемента з id myElement розпочнеться через 2 секунди після її активації.

Властивість animationDelay може приймати також від'ємні значення. У таких випадках анімація розпочнеться одразу, але від'ємна частина часу буде пропущена:

const element = document.getElementById("myElement");
element.style.animationDelay = "-1s";

Тут анімація почнеться одразу, але її перша секунда буде пропущена.

Для більш складних випадків animationDelay може використовуватися разом з іншими властивостями анімації для досягнення бажаного ефекту. Наприклад, можна створити послідовні анімації для кількох елементів, встановлюючи різні затримки:

const element1 = document.getElementById("element1");
const element2 = document.getElementById("element2");
const element3 = document.getElementById("element3");

element1.style.animation = "exampleAnimation 2s";
element1.style.animationDelay = "0s";

element2.style.animation = "exampleAnimation 2s";
element2.style.animationDelay = "1s";

element3.style.animation = "exampleAnimation 2s";
element3.style.animationDelay = "2s";

У цьому прикладі три елементи анімуються з інтервалом у 1 секунду між початками анімацій, створюючи ефект послідовної анімації.

Важливо зазначити, що значення властивості animationDelay можуть бути отримані у форматі рядка, тому при отриманні поточної затримки анімації слід враховувати це:

const delay = element.style.animationDelay;
console.log(delay); // виведе "2s"

Окрім числових значень, animationDelay може приймати кілька значень, розділених комами, якщо до одного елемента застосовується кілька анімацій:

const element = document.getElementById("myElement");
element.style.animation = "animation1 2s, animation2 3s";
element.style.animationDelay = "1s, 2s";

У цьому випадку перша анімація розпочнеться через 1 секунду, а друга – через 2 секунди.

Таким чином, властивість animationDelay надає гнучкі можливості для управління часом початку анімацій, що дозволяє створювати більш динамічні та інтерактивні веб-сторінки. Вона є невід'ємною частиною інструментарію веб-розробників, які прагнуть зробити свій інтерфейс користувача більш привабливим та функціональним.

Синтаксис

element.style.animationDelay

Значення

Return

Переглядачі

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

Приклади

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

<button id="animateButton">Анімувати елемент</button>
<div id="animatedElement">Це анімований елемент</div>

<script>
const animatedElement = document.getElementById('animatedElement');
const animateButton = document.getElementById('animateButton');

animateButton.addEventListener('click', () => {
  animatedElement.style.animation = 'slideIn 1s ease-out';
  animatedElement.style.animationDelay = '2s'; // Затримка 2 секунди
});
</script>

<style>
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
</style>

<div class="container">
  <div class="animated-element">Елемент 1</div>
  <div class="animated-element">Елемент 2</div>
  <div class="animated-element">Елемент 3</div>
</div>

<script>
const animatedElements = document.querySelectorAll('.animated-element');

animatedElements.forEach((element, index) => {
  element.style.animation = 'fadeIn 1s ease-out';
  element.style.animationDelay = `${index * 0.5}s`; // Затримка збільшується для кожного елемента
});
</script>

<style>
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.container {
  display: flex;
  justify-content: center;
}

.animated-element {
  background-color: lightgray;
  padding: 10px;
  margin: 5px;
}
</style>