Как передать значения из JS в css?

Question

.anim2 {
  animation-duration: 3s;   //<--вот сюды
  animation-name: oscil2;
  animation-iteration-count: infinite;
}

Это кусок css-анимации, куда надо вставить переменную numberT.

А это ссылка, где обясняется, как это сделать, но в JS я ничего не стою

И да, я уже задавал такой вопрос, но тут нужен другой способ

Answer 1

setTimeout(()=>{
  let a = document.querySelector('.anim2');
  a.style["animation-duration"] = '5s';
},6000)

.anim2 {
  height: 20px;
  width: 20px;
  background: red;
  animation-duration: 1s;   
  animation-name: oscil2;
  animation-iteration-count: infinite;
}
@keyframes oscil2 {
  from {background: red;}
  to {background: yellow;}
}

<div class = "anim2"></div>

Answer 2

Отталкиваясь от ссылки в вопросе, я предположу что вопрос связан с CSS переменными.
А точнее с изменением их при помощи JS.

Для этого можно использовать метод .setProperty()

setTimeout(function() {
  let a = document.querySelector('.anim2');
  a.style.setProperty('--dur', '5s');
},6000)

.anim2 {
  height: 20px;
  width: 20px;
  background: red;
  animation-duration: var(--dur, 1s);   
  animation-name: oscil2;
  animation-iteration-count: infinite;
  position: absolute;
}

@keyframes oscil2 {
  0%, 100% {left: 0%;}
  50% {left: 200px;}
}

<div class = "anim2"></div>

БЛОГ НА HUSL

Как передать значения из JS в css?

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