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

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

element.style.transitionDelay – це властивість, яка встановлює затримку перед початком анімації CSS-переходу на елементі. Це значення задається у секундах (s) або мілісекундах (ms) і дозволяє контролювати, коли саме почнеться анімація після зміни властивостей CSS.

Використання transitionDelay може бути особливо корисним для створення послідовних анімацій або для відстрочення анімації до певного моменту. Наприклад, щоб встановити затримку перед початком анімації зміни ширини елемента на 2 секунди, можна зробити наступне:

const element = document.getElementById('box');
element.style.transitionProperty = 'width';
element.style.transitionDuration = '2s';
element.style.transitionDelay = '2s';
element.style.width = '300px';

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

Якщо потрібно встановити затримку для кількох властивостей, можна вказати кілька значень через кому. Наприклад, щоб встановити затримку 1 секунду для зміни ширини та 2 секунди для зміни висоти:

element.style.transitionProperty = 'width, height';
element.style.transitionDuration = '2s, 3s';
element.style.transitionDelay = '1s, 2s';
element.style.width = '300px';
element.style.height = '200px';

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

transitionDelay також може бути корисним для створення каскадних анімацій, де кілька елементів анімуються послідовно. Наприклад, можна створити ефект, де кожен наступний елемент починає анімацію після певного проміжку часу:

const elements = document.querySelectorAll('.box');
elements.forEach((element, index) => {
    element.style.transitionProperty = 'opacity';
    element.style.transitionDuration = '1s';
    element.style.transitionDelay = `${index * 0.5}s`;
    element.style.opacity = '1';
});

У цьому прикладі кожен елемент класу box починає змінювати прозорість із затримкою, що збільшується на 0.5 секунди для кожного наступного елемента.

Затримку можна змінювати динамічно залежно від взаємодії користувача. Наприклад, при наведенні курсору на елемент можна встановити одну затримку, а при знятті наведення – іншу:

element.addEventListener('mouseover', () => {
    element.style.transitionDelay = '0s';
    element.style.width = '400px';
});

element.addEventListener('mouseout', () => {
    element.style.transitionDelay = '1s';
    element.style.width = '100px';
});

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

Отже, element.style.transitionDelay є потужним інструментом для керування затримкою перед початком анімації CSS-переходу, що дозволяє створювати складніші та привабливіші анімаційні ефекти на веб-сторінках.

Порада:	Не бійтеся експериментувати з великими значеннями `transitionDelay`, особливо коли хочете привернути увагу до певних елементів на сторінці. Наприклад, ви можете встановити затримку у кілька секунд для елементів, що з'являються при завантаженні сторінки, щоб привернути увагу користувачів до важливих повідомлень або банерів. Це може бути корисно для маркетингових цілей або для підвищення важливості конкретного контенту.
Порада:	Пам'ятайте, що `transitionDelay` можна динамічно змінювати в залежності від взаємодії користувача. Наприклад, можна встановити коротку затримку при наведенні курсору на елемент, щоб він швидше реагував на взаємодію, і довшу затримку при знятті наведення, щоб зберегти увагу користувача на цьому елементі довше. Це робить інтерфейс більш інтерактивним і гнучким, забезпечуючи кращий користувацький досвід.
Порада:	Використовуйте `transitionDelay` разом з іншими властивостями переходів, такими як `transitionDuration` і `transitionTimingFunction`, для досягнення більшої гнучкості та контролю над анімаціями. Поєднання цих властивостей дозволяє створювати складні та привабливі анімації, які можна налаштувати для різних сценаріїв і потреб. Це допомагає зробити ваші анімації більш професійними та елегантними.

Синтаксис

element.style.transitionDelay

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад дозволяє користувачу встановити затримку анімації для трьох елементів. Користувач може вибрати затримку в секундах, після чого натискає кнопку для застосування змін. Елементи будуть анімуватися послідовно з затримкою, яка збільшується для кожного наступного елемента. Це наочно демонструє можливості element.style.transitionDelay для створення каскадних анімацій та управління затримкою анімацій через взаємодію з користувачем.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/xxodqMP">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

const elements = document.querySelectorAll('.list-item');
elements.forEach((element, index) => {
    element.style.transitionProperty = 'opacity';
    element.style.transitionDuration = '1s';
    element.style.transitionDelay = `${index * 0.3}s`;
    element.style.opacity = '1';
});

У цьому прикладі ми використовуємо transitionDelay для динамічного налаштування затримки анімації при взаємодії з користувачем. При наведенні курсору на елемент його фон змінюється миттєво, а масштаб збільшується із затримкою в 0.5 секунди. При знятті наведення фон змінюється із затримкою в 0.5 секунди, а масштаб зменшується миттєво. Це дозволяє створити інтуїтивно зрозумілі та привабливі ефекти взаємодії з елементами інтерфейсу.

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

box.addEventListener('mouseover', () => {
    box.style.transitionProperty = 'background-color, transform';
    box.style.transitionDuration = '1s, 1s';
    box.style.transitionDelay = '0s, 0.5s';
    box.style.backgroundColor = 'blue';
    box.style.transform = 'scale(1.2)';
});

box.addEventListener('mouseout', () => {
    box.style.transitionProperty = 'background-color, transform';
    box.style.transitionDuration = '1s, 1s';
    box.style.transitionDelay = '0.5s, 0s';
    box.style.backgroundColor = 'red';
    box.style.transform = 'scale(1)';
});

JS довідник

JavaScript

Наповнення JS розділу