Skip to main content
Troquei as cores pra não ficar parecendo efeito de opacidade apenas
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Podes (e deves, por razões de performance) usar CSS. Ou seja adicionando e removendo classes.

Um exemplo seria assim:

setInterval(() => {
  document.querySelector('.alpha').classList.toggle('active');
}, 1500);
.alpha {
  padding: 50px 30px;
  background-color: #272;#07f;
  transition: background-color 1s;
}

.alpha.active {
  background-color: #afa;#f50;
}
<div class="alpha"></div>

Podes (e deves, por razões de performance) usar CSS. Ou seja adicionando e removendo classes.

Um exemplo seria assim:

setInterval(() => {
  document.querySelector('.alpha').classList.toggle('active');
}, 1500);
.alpha {
  padding: 50px 30px;
  background-color: #272;
  transition: background-color 1s;
}

.alpha.active {
  background-color: #afa;
}
<div class="alpha"></div>

Podes (e deves, por razões de performance) usar CSS. Ou seja adicionando e removendo classes.

Um exemplo seria assim:

setInterval(() => {
  document.querySelector('.alpha').classList.toggle('active');
}, 1500);
.alpha {
  padding: 50px 30px;
  background-color: #07f;
  transition: background-color 1s;
}

.alpha.active {
  background-color: #f50;
}
<div class="alpha"></div>

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Podes (e deves, por razões de performance) usar CSS. Ou seja adicionando e removendo classes.

Um exemplo seria assim:

setInterval(() => {
  document.querySelector('.alpha').classList.toggle('active');
}, 1500);
.alpha {
  padding: 50px 30px;
  background-color: #272;
  transition: background-color 1s;
}

.alpha.active {
  background-color: #afa;
}
<div class="alpha"></div>