Изменить css animation-duration время из js

Question

Мне нужно чтобы была возможность из меню, по клику изменить длительность анимации

получаю элемент: let anim = document.getElementByClassName('animator'); вывожу в консоль что имею: console.log(anim); - сам элемент выводится вывожу в консоль стили: console.log(anim.style) - получаю undefined - нет сакого свойства в этом объекте Выходит что до анимации я не могу даже добраться, не то чтобы установить.

Answer 1

Что-то такое?

let block = document.getElementById('block');

function change() {
  block.style.setProperty('--duration', '1s');
}

.button {
  position: absolute;
  bottom: 0;
}

#block {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  right: 100%;
  animation: anim infinite var(--duration);
}

@keyframes anim {
  50% {
    right: 0;
  }
}

<div id="block" style="--duration: 5s"></div>
<button onclick="change()" class="button">Изменить</button>

БЛОГ НА HUSL

Изменить css animation-duration время из js

Ответы (1 шт):