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.animate() та Animation.prototype. Наприклад, const player = element.animate(keyframes, options) повертає об'єкт Animation, який дозволяє керувати анімацією за допомогою методів, таких як player.pause(), player.reverse() або player.updatePlaybackRate(2).

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

Порада

Використовуйте властивість animationPlayState для програмного керування станом анімації. Значення running запускає анімацію, а paused - призупиняє її. Це корисно для створення інтерактивних анімацій, що реагують на дії користувача. Наприклад, element.style.animationPlayState = 'paused' зупиняє анімацію на поточному кадрі.

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

Порада

Для плавного переходу між анімаціями використовуйте властивість animationTimingFunction. Вона дозволяє визначити часову функцію, яка керує швидкістю анімації на різних етапах її виконання. Наприклад, animation: myAnimation 2s ease-in-out створює плавний розгін і гальмування анімації на початку та в кінці.

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

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

Синтаксис

element.style.animation

Переглядачі

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

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

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

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

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

Приклади

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

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