Change CSS class color after a few seconds

Question

I need to know how to make a CSS class that includes a color code fade to different colors continuously. If your solution works in wordpress, it' even better.

Answer 1

For modern browsers you could use @keyframes. Depending on the browsers you need to support this example may require vendor prefixes to be added too. Also, performance will vary:

/* rainbow song colours */
@keyframes fadeBetween { 
    0% {background-color: red;}
    15% {background-color: yellow;}
    30% {background-color: pink;}
    45% {background-color: green;}
    60% {background-color: orange;}
    75% {background-color: purple;}
    100% {background-color: blue;}
}

.colour-fade {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: fadeBetween 35s infinite;
} 

<div class="colour-fade"></div>

Answer 2

You can use jquery. Try this simple example and change as code as required.

$(document).ready(function() {  
 setInterval(function() {
    $('body').animate( { color: 'red' }, 1000)
    .animate( { color: 'green' }, 1000); 
    }, 1000);

 });

JSFiddle