JS Diashow mit einer Hintergrundfarbe ändern in CSS

Question

Ich entschied mich zu versuchen, eine Diashow mit Animation aus CSS für Hintergrund mit einer zweiten Ebene in Javascript mit Jquery zu erstellen.

Das Javascript funktioniert korrekt, aber der CSS-Hintergrund ist nicht korrekt. Hier ist der Code für beide. Der Javascript-Code wurde von W3Schools 'Automatic Slideshow example ausgeliehen.

CSS:

body { 
    animation-name: change_color; animation-duration: 10s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
} 
@keyframes change_color { 
    { from (0%) } 
    { to (100%) } 
} 

Javascript:

var slideIndex = 0; 
carousel(); 

function carousel() { 
    var i = 0; 
    var x = document.getElementsByClassName("a"); 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex > x.length) { 
    slideIndex = 1 
    } 
    x[slideIndex - 1].style.display = "block"; 
    setTimeout(carousel, 10000); // Change image every 2 seconds 
} 

Answer 1

Nun, ich kann nur annehmen, was Sie auf den Mangel an HTML aufgrund wollen, aber das Problem liegt in der CSS:

@keyframes change_color{ 
    {from (0%)} 
    {to (100%)} 
} 

Ein von-zu-Keyframe geht so (das from(0%){} to(100%){} ist automatisch):

@keyframes change_color{ 
    from { 
    background-color: red; 
    } 
    to { 
    background-color: blue; 
    } 
} 

Die keyframes documentation ist eine nette Quelle.

Hier sind einige alternative CSS.

CSS:

body { 
    background-color: black; /* whatever color you want */ 
    transition: background-color, 2s, ease-in-out, infinite; 
} 

Mit transitions, können Sie die JS verwenden, um die Art zu ändern langsam auf die gewünschte Farbe für den Übergang, ändern Sie einfach das Element des background-color, werden Sie element.style.backgroundColor='red' zu tun haben.