weblab,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{
width:100px;
height:100px;
-webkit-animation: color 5s ease-in-out infinite;
-moz-animation: color 5s ease-in-out infinite;
-o-animation: color 5s ease-in-out infinite;
animation: color 5s ease-in-out infinite;
}
@keyframes color {
0% {
background-color: #FF0000;
}
17%{
background-color: #FFA500;
}
34%{
background-color: #FFFF00;
}
51%{
background-color: #008000;
}
68% {
background-color: #0000FF;
}
85%{
background-color: #000080;
}
100%{
background-color: #800080;
}
}
@-webkit-keyframes color {
0% {
background-color: #FF0000;
}
17%{
background-color: #FFA500;
}
34%{
background-color: #FFFF00;
}
51%{
background-color: #008000;
}
68% {
background-color: #0000FF;
}
85%{
background-color: #000080;
}
100%{
background-color: #800080;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>