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

автор: Bond

Порада

animationDuration можна використовувати разом з іншими властивостями animation*, такими як animationDelay, animationIterationCount та animationTimingFunction, для створення складних і ефектних анімацій.

автор: Bond

Порада

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

автор: Bond

Порада

Завжди вказуйте одиницю вимірювання (s для секунд або ms для мілісекунд) при встановленні значення для animationDuration. Відсутність одиниці вимірювання призведе до некоректної роботи анімації.

автор: Bond

Порада

Використовуйте animationDuration для динамічної зміни тривалості анімації в залежності від певних умов, наприклад, при наведенні курсору на елемент:

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

автор: Bond

Синтаксис

element.style.animationDuration

Переглядачі

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

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

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

Приклади

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

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

HTML

<button id="button">Натисни</button>

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

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

автор: Bond

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

автор: Bond

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!