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

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

Властивість animationDuration надає можливість програмно керувати тривалістю CSS-анімацій, застосованих до елемента веб-сторінки. Вона визначає, скільки часу триватиме один цикл анімації, заданої за допомогою правила @keyframes або властивості animation в CSS.

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

Для встановлення тривалості анімації необхідно присвоїти властивості animationDuration строкове значення, що містить число з одиницею вимірювання часу. Допустимі одиниці вимірювання:

s (секунди)
ms (мілісекунди)

Наприклад, наступний код встановить тривалість анімації елемента з ідентифікатором myElement на 2 секунди:

document.getElementById('myElement').style.animationDuration = '2s';

Якщо до елемента застосовано декілька анімацій одночасно (наприклад, за допомогою властивості animation з кількома значеннями), element.style.animationDuration впливатиме на тривалість кожної з них.

Слід зазначити, що властивість animationDuration впливає лише на анімації, задані вбудованими стилями елемента. Щоб змінити тривалість анімації, заданої в CSS-файлі або тезі <style>, необхідно використовувати методи для роботи з CSS-правилами, такі як element.style.setProperty().

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

<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
}

#myElement:hover {
  animation-name: myAnimation;
}

@keyframes myAnimation {
  from { background-color: red; }
  to { background-color: blue; }
}
</style>
</head>
<body>

<div id="myElement"></div>

<script>
  const element = document.getElementById('myElement');

  element.addEventListener('mouseover', () => {
    element.style.animationDuration = '1s';
  });

  element.addEventListener('mouseout', () => {
    element.style.animationDuration = '3s';
  });
</script>

</body>
</html>

В цьому прикладі при наведенні курсору на елемент з ідентифікатором myElement тривалість анімації змінюється на 1 секунду, а при відведенні курсору - на 3 секунди. Таким чином, animationDuration надає гнучкість в управлінні анімаціями та дозволяє створювати інтерактивні та динамічні веб-інтерфейси.

Порада:	Хоча `animationDuration` підтримується більшістю сучасних браузерів, рекомендується перевіряти сумісність перед використанням цієї властивості, особливо якщо ви розробляєте сайт для застарілих браузерів.
Порада:	Завжди вказуйте одиницю вимірювання (`s` для секунд або `ms` для мілісекунд) при встановленні значення для `animationDuration`. Відсутність одиниці вимірювання призведе до некоректної роботи анімації.
Порада:	Використовуйте `animationDuration` для динамічної зміни тривалості анімації в залежності від певних умов, наприклад, при наведенні курсору на елемент: `element.addEventListener('mouseover', () => { element.style.animationDuration = '0.5s'; });`
Порада:	`animationDuration` можна використовувати разом з іншими властивостями `animation*`, такими як `animationDelay`, `animationIterationCount` та `animationTimingFunction`, для створення складних і ефектних анімацій.

Синтаксис

element.style.animationDuration

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/JjqEzde">
  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>.

У цьому прикладі ми встановимо тривалість анімації для кнопки при кліку на неї. Для цього ми використовуємо властивість "element.style.animationDuration" для зміни тривалості анімації кнопки.

// Отримуємо кнопку з DOM
var button = document.getElementById("button");

// Додаємо подію кліку на кнопку
button.addEventListener("click", function() {
    // Встановлюємо тривалість анімації на 1 секунду
    this.style.animationDuration = "1s";
});

У цьому прикладі ми створимо анімацію, яка буде змінювати тривалість своєї власної анімації під час виконання. Для цього ми будемо використовувати JavaScript разом з CSS для створення ефектної анімації.

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анімація зі зміною тривалості</title>
<style>
/* Стилі для анімації */
@keyframes changeDuration {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Стилі для елементу, що буде анімуватися */
#animatedElement {
    width: 100px;
    height: 100px;
    background-color: #00f;
    animation-name: changeDuration;
    /* Початкова тривалість анімації 2 секунди */
    animation-duration: "2s";
    animation-iteration-count: infinite;
}
</style>
</head>
<body>
<!-- Елемент, який буде анімуватися -->
<div id="animatedElement"></div>

<script>
// Отримуємо елемент з DOM
var animatedElement = document.getElementById("animatedElement");

// Змінюємо тривалість анімації через певний час
setTimeout(function() {
    // Встановлюємо нову тривалість анімації - 4 секунди
    animatedElement.style.animationDuration = "4s";
}, 3000); // Змінюємо тривалість через 3 секунди
</script>
</body>
</html>

JS довідник

JavaScript

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