Warum Regenbogen Hintergrund auf dem Body-Tag nicht funktioniert?

Question

Ich muss die Hintergrundfarbe des Körpers dynamisch aus einer Liste von Farben ändern. Natürlich muss ich es glatt ändern. Wenn Sie Ideen haben, bitte helfen Sie! Außerdem muss es in einem Zyklus sein, damit die Farben sich wiederholen. Ich denke an while(1)

Ich habe versucht, überall zu suchen!

P.S. Ich habe versucht, es mit DOM zu ändern, aber ich konnte nicht erfolgreich sein. ich habe folgende JavaScript tryed

while(1){ 
    document.body.style.backgroundColor = "red"; 
    document.body.style.backgroundColor = "orange"; 
    document.body.style.backgroundColor = "green"; 
    document.body.style.backgroundColor = "blue"; 
} 

Hat es Sinn macht? Ich habe gerade alles ausprobiert! Wenn Sie eine Idee haben, bitte teilen Sie es mit!

Answer 1

Die einfachste Lösung dieses Problems beinhaltet eigentlich gar kein Javascript, einfach nur CSS:

body { 
 
    animation: rainbow 10s linear infinite; 
 
} 
 

 
@keyframes rainbow { 
 
    0% {background-color: red;} 
 
    25% {background-color: orange;} 
 
    50% {background-color: green;} 
 
    75% {background-color: blue;} 
 
    100% {background-color: red;} 
 
}

Sie können die 10s zu, was Dauer ändern (in Sekunden) die Animation wollen spiele vor dem Wiederholen.