How to fade multiple background colors after few seconds?

Question

I want to know how can I change the background color after couple of seconds in css?

For example I want 3 colors: blue, red, green. After each 3 seconds the background color is changing.

Does anyone has any idea?

This is my code. But I can change only 2 colors and is not looping

p {
    display: inline;
    animation: background-fade 3s forwards;
    -webkit-animation: background-fade 3s forwards;
    -moz-animation: background-fade 3s forwards;
}

@-webkit-keyframes background-fade {
    100% {
        background:#c92884;
    }
}

JSFidlle http://jsfiddle.net/326mJ/7/

Also related: http://stackoverflow.com/questions/23458640/how-to-have-css3-animation-to-loop-forever — cimmanon, Jun 05 '15 at 13:12

score 4 · Accepted Answer · answered Jun 05 '15 at 13:03

4

try like this: Demo

body{

animation: background-fade 10s infinite;    
}

@keyframes background-fade {
    0% {
        background:red;
    }
    50% {
        background:blue;
    }
    100% {
        background:green;
    }
}

You need to use infinite instead of forwards for looping

answered Jun 05 '15 at 13:03

G.L.P

7,119
5
25
41

Small improvement: http://jsfiddle.net/kztyasg1/1/ – Jordumus Jun 05 '15 at 13:07
Yup, Thanks for the edit :) – G.L.P Jun 05 '15 at 13:08

How to fade multiple background colors after few seconds?

1 Answers1