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

Приклади

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

<header>
  <h2 class="title">animation</h2>
  <p class="description">Застосовує анімацію, визначену в CSS, до елемента.</p>
</header>
<main>
  <div class="result">
    <div class="animated-element">Це анімований елемент</div>
    <div class="controls">
      <button id="playAnimation">Запустити анімацію</button>
      <button id="pauseAnimation">Призупинити анімацію</button>
      <select id="animationSelect">
        <option value="slideIn">Анімація слайду</option>
        <option value="fadeIn">Анімація появи</option>
        <option value="bounce">Анімація відскоку</option>
      </select>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.animated-element {
  width: 200px;
  height: 200px;
  background-color: lightgray;
  margin-bottom: 20px;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

const animatedElement = document.querySelector('.animated-element');
const playButton = document.getElementById('playAnimation');
const pauseButton = document.getElementById('pauseAnimation');
const animationSelect = document.getElementById('animationSelect');

let animation;

playButton.addEventListener('click', () => {
  const animationName = animationSelect.value;
  animation = animatedElement.animate(
  [
  { transform: 'none' },
  { transform: 'none' }],

  {
    duration: 1000,
    iterations: Infinity,
    easing: 'ease-in-out',
    direction: 'alternate' });


  animatedElement.style.animation = `${animationName} 1s infinite`;
});

pauseButton.addEventListener('click', () => {
  if (animation) {
    animation.cancel();
    animatedElement.style.animation = 'none';
  }
});

animationSelect.addEventListener('change', () => {
  if (animation) {
    animation.cancel();
  }
  const animationName = animationSelect.value;
  animatedElement.style.animation = `${animationName} 1s infinite`;
});
//# sourceURL=pen.js

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