CSS Color Color Switch - css, css3, css-transitions, background-color

È possibile cambiare i colori di sfondo solo con CSS3?

Ho provato ad usare le animazioni dei fotogrammi chiave ma quellotransizioni solo il colore di sfondo. Tutto quello che voglio fare è cambiare il colore dello sfondo dopo 5 secondi senza transizione. Non voglio alcun effetto al passaggio del mouse ecc.

Ho pensato che ci dev'essere sicuramente un modo per poterlo sfumare solo per passare ad esso.

Grazie.

risposte:

3 per risposta № 1

Bene, per fare un transition senza un transition-duration ma con delay, uso

html { background: red; transition: background 0s 5s; }

Ma il problema qui è che non ci sono cambiamenti di stato, quindi la transizione non funzionerà, penso che avresti bisogno di un po 'di JavaScript.

$("html").addClass("loaded");

Quando il css è

html { background: red; transition: background 0s 5s; }
html.loaded { background: blue; }

Ecco un Violino

Nota a margine: attenzione prefissi del venditore per il transition dichiarazioni.

utilizzando animations

Questo non avrà bisogno di JavaScript:

html {
background: blue; /* fallback */
animation: switchColor 5s;
}

@keyframes switchColor {
0% {
background: red;
}
99.9999% {
background: red;
}
100% {
background: blue;
}
}

Ecco il Violino

Utilizzando puro jQuery

Oppure potresti usare solo JavaScript per questo. Se vuoi solo cambiare il colore senza transizione, usa il tasto setTimeout() funzione:

setTimeout(function() {
$("html").css("background", "blue");
}, 5000);

Ecco il Violino

---