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

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

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

Основний приклад

Найпростішим випадком використання властивості animation є встановлення анімації для елемента. Розглянемо наступний приклад:

const element = document.getElementById("myElement");
element.style.animation = "exampleAnimation 2s infinite";

У цьому прикладі ми знаходимо елемент за його id та встановлюємо йому анімацію з ім'ям exampleAnimation, яка триватиме 2 секунди та повторюватиметься нескінченно.

Опис параметрів

Властивість animation може приймати кілька параметрів, що задаються через пробіл:

• Назва анімації (animation-name)
• Тривалість (animation-duration)
• Функція таймінгу (animation-timing-function)
• Затримка (animation-delay)
• Кількість повторень (animation-iteration-count)
• Напрямок анімації (animation-direction)
• Стан заповнення (animation-fill-mode)
• Чи працює анімація (animation-play-state)

Розглянемо більш складний приклад з використанням декількох параметрів:

const element = document.getElementById("myElement");
element.style.animation = "exampleAnimation 2s ease-in-out 1s 3 reverse both paused";

У цьому випадку анімація exampleAnimation буде мати такі характеристики:

• Тривалість: 2 секунди
• Функція таймінгу: ease-in-out
• Затримка: 1 секунда
• Кількість повторень: 3 рази
• Напрямок: reverse
• Стан заповнення: both
• Статус: paused

Застосування складніших анімацій

Властивість animation також дозволяє задавати кілька анімацій одночасно. Це досягається шляхом розділення окремих анімацій комою:

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

У цьому прикладі елементу одночасно застосовуються дві анімації:

1. animation1 з тривалістю 2 секунди.
2. animation2 з тривалістю 3 секунди, затримкою 1 секунда та станом заповнення both.

Маніпулювання анімаціями за допомогою JavaScript

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

const element = document.getElementById("myElement");
element.style.animationDuration = "5s";

Цей код змінює тривалість поточної анімації елемента на 5 секунд.

Використання ключових кадрів

Щоб анімація працювала, необхідно визначити її ключові кадри в CSS. Наприклад:

@keyframes exampleAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

Цей код визначає анімацію exampleAnimation, яка змінює прозорість елемента з 0 до 1.

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

Синтаксис

element.style.animation

Значення

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';
});
</script>

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

<button id="toggleAnimation">Перемкнути анімацію</button>
<div id="animatedElement">Це анімований елемент</div>

<script>
const animatedElement = document.getElementById('animatedElement');
const toggleButton = document.getElementById('toggleAnimation');
let isAnimationRunning = false;

toggleButton.addEventListener('click', () => {
  if (isAnimationRunning) {
    animatedElement.style.animationPlayState = 'paused';
    isAnimationRunning = false;
  } else {
    animatedElement.style.animation = 'pulse 2s infinite';
    animatedElement.style.animationPlayState = 'running';
    isAnimationRunning = true;
  }
});
</script>

<style>
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>