fade in/out colors

by slawe

CSS

body {
background-color: #00B04F;
-webkit-animation: color_change 50s infinite alternate;
-moz-animation: color_change 50s infinite alternate;
-ms-animation: color_change 50s infinite alternate;
-o-animation: color_change 50s infinite alternate;
animation: color_change 50s infinite alternate;
}

@-webkit-keyframes color_change {
    0% { background-color: #00B04F; }
    20% { background-color: #FF99FF; }
    40% { background-color: #FFFF00; }
    60% { background-color: #006FC0; }
    80% { background-color: #6F2FA0; }
    100% { background-color: #974605; }
}
@-moz-keyframes color_change {
    0% { background-color: #00B04F; }
    20% { background-color: #FF99FF; }
    40% { background-color: #FFFF00; }
    60% { background-color: #006FC0; }
    80% { background-color: #6F2FA0; }
    100% { background-color: #974605; }
}
@-ms-keyframes color_change {
    0% { background-color: #00B04F; }
    20% { background-color: #FF99FF; }
    40% { background-color: #FFFF00; }
    60% { background-color: #006FC0; }
    80% { background-color: #6F2FA0; }
    100% { background-color: #974605; }
}
@-o-keyframes color_change {
    0% { background-color: #00B04F; }
    20% { background-color: #FF99FF; }
    40% { background-color: #FFFF00; }
    60% { background-color: #006FC0; }
    80% { background-color: #6F2FA0; }
    100% { background-color: #974605; }
}
@keyframes color_change {
    0% { background-color: #00B04F; }
    20% { background-color: #FF99FF; }
    40% { background-color: #FFFF00; }
    60% { background-color: #006FC0; }
    80% { background-color: #6F2FA0; }
    100% { background-color: #974605; }
}