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

правити

Порада

Пам'ятайте, що Styles.animationDelay приймає від'ємні значення. Це може бути корисно, якщо ви хочете, щоб анімація починалася одразу, але з певним пропуском початкової частини. Наприклад, встановивши element.style.animationDelay = "-1s", анімація почнеться одразу, пропустивши першу секунду.

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

Порада

Використовуйте кілька значень Styles.animationDelay, якщо ваш елемент має кілька анімацій. Це дозволяє вам точно контролювати затримку для кожної анімації окремо. Наприклад, для двох анімацій з різними затримками:

const element = document.getElementById("myElement");
element.style.animation = "slideIn 2s, fadeOut 3s";
element.style.animationDelay = "0s, 1s";

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

Порада

Використовуйте getComputedStyle для отримання поточного значення Styles.animationDelay. Це дозволяє вам динамічно перевіряти і маніпулювати затримками анімацій. Наприклад, ви можете отримати поточне значення затримки та змінити його на нове:

const element = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(element);
const currentDelay = computedStyle.animationDelay;
console.log(currentDelay); // виведе поточне значення затримки анімації
element.style.animationDelay = "3s"; // змінює затримку на 3 секунди

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

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

Синтаксис

element.style.animationDelay

Переглядачі

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">element.style.animationDelay</h2>
  <p class="description">Встановлює затримку перед початком анімації для вибраного елемента.</p>
</header>
<main>
  <div class="result">
    <!-- Анімований елемент -->
    <div id="animatedBox" class="box"></div>

    <!-- Інтерфейс для управління -->
    <label for="delaySlider">Встановити затримку анімації (секунди):</label>
    <input type="range" id="delaySlider" min="0" max="5" step="0.1" value="0">
    <span id="delayValue">0</span>s

    <!-- Кнопка для повторного запуску анімації -->
    <button id="startAnimation">Запустити анімацію</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px 0;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

.box.animate {
  animation-name: slide;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

const box = document.getElementById('animatedBox');
const slider = document.getElementById('delaySlider');
const delayValue = document.getElementById('delayValue');
const startButton = document.getElementById('startAnimation');

// Оновлення значення затримки у span при зміні повзунка
slider.addEventListener('input', function () {
  delayValue.textContent = slider.value;
});

// Запуск анімації з заданою затримкою
startButton.addEventListener('click', function () {
  // Встановлення затримки анімації
  box.style.animationDelay = slider.value + 's';

  // Перезапуск анімації
  box.classList.remove('animate');
  void box.offsetWidth; // Примусове перерахування стилів, щоб перезапустити анімацію
  box.classList.add('animate');
});
//# sourceURL=pen.js

<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>