No need for Javascript - you can do this in pure CSS:
\#p1
{
background-color:hsl(150, 100%, 80%);
animation: color-change 18s infinite;
}
@keyframes color-change
{
0% { background-color: hsl(0, 100%, 80%); }
50% { background-color: hsl(180, 100%, 80%); }
100% { background-color: hsl(360, 100%, 80%); }
}
http://jsfiddle.net/8kfw0v42/[
^]
You might need some vendor prefixes to support older browsers -
this tool[
^] will generate them for you.
Ignore the \
in front of the #p1
- it's just there to stop this site's code from trying to turn it into an <h1>
tag!