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

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

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

Для використання animationName, необхідно спочатку визначити анімацію за допомогою правил CSS @keyframes. Після цього, за допомогою JavaScript, можна призначити цю анімацію до елемента через властивість animationName.

Розглянемо базовий приклад, де HTML-елемент з id "box" буде анімовано за допомогою визначеної CSS-анімації:

<div id="box"></div>

У CSS ми створюємо анімацію:

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

Тепер, за допомогою JavaScript, ми можемо призначити анімацію до елемента box:

var box = document.getElementById('box');
box.style.animationName = 'moveRight';

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

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

<button id="animateButton">Animate</button>
<div id="box"></div>

@keyframes moveDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(100px); }
}

var box = document.getElementById('box');
var button = document.getElementById('animateButton');

button.addEventListener('click', function() {
  box.style.animationName = 'moveDown';
});

У цьому прикладі при натисканні кнопки Animate елемент box почне переміщатися вниз на 100 пікселів.

Властивість animationName також може бути використана для зміни анімацій в залежності від різних умов. Наприклад, можна змінювати анімацію при зміні розміру вікна браузера:

window.addEventListener('resize', function() {
  if (window.innerWidth < 600) {
    box.style.animationName = 'moveRight';
  } else {
    box.style.animationName = 'moveDown';
  }
});

У цьому випадку, якщо ширина вікна браузера менша за 600 пікселів, буде застосована анімація moveRight, а якщо більша — moveDown.

Ще один приклад демонструє, як можна комбінувати кілька анімацій для створення більш складних ефектів. Припустимо, ми хочемо, щоб елемент спочатку переміщався праворуч, а потім вниз. Ми можемо створити дві анімації:

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

@keyframes moveDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(100px); }
}

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

// Спочатку анімація moveRight
box.style.animationName = 'moveRight';
box.style.animationDuration = '2s';
box.style.animationIterationCount = '1';

// Затримка перед запуском другої анімації
setTimeout(function() {
  box.style.animationName = 'moveDown';
  box.style.animationDuration = '2s';
  box.style.animationIterationCount = '1';
}, 2000);

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

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

правити

Порада

Якщо потрібно застосувати кілька анімацій одночасно, можна розділити їх назви пробілом у значенні animationName. Наприклад, animationName = "fadeIn moveX" застосує анімації fadeIn та moveX до елемента.

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

Порада

Якщо не потрібно застосовувати жодної анімації, встановіть animationName на порожній рядок (''). Це зупинить відтворення будь-якої анімації на елементі.

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

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

Синтаксис

element.style.animationName

Переглядачі

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

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

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

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

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

Приклади

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

<img id="slideImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">

// Отримуємо елемент для зображення
const imageElement = document.getElementById('slideImage');

// Масив назв анімацій
const animations = ['slideInLeft', 'slideOutLeft', 'slideInRight', 'slideOutRight'];

// Лічильник для переходу між анімаціями
let animationIndex = 0;

// Функція для зміни анімації
function changeAnimation() {
  imageElement.style.animationName = animations[animationIndex];
  animationIndex = (animationIndex + 1) % animations.length;
}

// Запускаємо анімацію кожні 3 секунди
setInterval(changeAnimation, 3000);

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент
const myElement = document.getElementById('myElement');

// Запускаємо анімацію
myElement.style.animationName = 'fadeIn';