Z użyciem funkcji strzałkowej, sprawa jest banalnie prosta (chodzi o zapis).
Jak już wspomniał @Michał Bysiewicz, setTimeout(...), np.:
const content = document.querySelector(".tekst");
setTimeout(() => { content.classList.add('active') }, 5000); // w ms, 1000 = 1sekunda
<div class="box-wrap">
<div class="circle green"></div>
<div class="circle red"></div>
</div>
* {
box-sizing: border-box;
}
.box-wrap {
display: flex;
justify-items: center;
width: 130px;
height: 65px;
margin: 1em;
background-color: silver;
border-radius: 2em;
}
.box-wrap .circle {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 0.5em;
transition: all 0.9s;
}
.green {
background-color: green;
background-image: radial-gradient(silver, green);
box-shadow: 0 0 2px 4px limegreen;
}
.red {
background-color: red;
background-image: radial-gradient(silver, red);
box-shadow: 0 0 2px 4px lightcoral;
}
const circle_light = document.querySelectorAll('.circle');
setTimeout(() => {
setInterval(() => {
circle_light.forEach(item => {
item.classList.toggle('green');
item.classList.toggle('red');
})
}, 1000)
}, 2000)