Creating smooth color transitions animation using CSS3

How to create simple smooth color transitions animation using CSS3.This can be done using css3 “animation” feature.Here is a demo and you can download the source code.

HTML page

Here style.css

/* defining animation.The "myAnimation" is animation name. */
@-webkit-keyframes myAnimation {
      0%  {background-color: #FFF;}
     25%  {background-color: #CCF;}
     50%  {background-color: #C3F;}
     75%  {background-color: #F30;}
     100% {background-color: #F00;}
}
/* Mozilla Firefox */
@-moz-keyframes myAnimation {
      0%  {background-color: #FFF;}
     25%  {background-color: #CCF;}
     50%  {background-color: #C3F;}
     75%  {background-color: #F30;}
     100% {background-color: #F00;}
}
/* Opera */
@-o-keyframes myAnimation {
      0%  {background-color: #FFF;}
     25%  {background-color: #CCF;}
     50%  {background-color: #C3F;}
     75%  {background-color: #F30;}
     100% {background-color: #F00;}
}
/* Other browsers */
@keyframes myAnimation {
      0%  {background-color: #FFF;}
     25%  {background-color: #CCF;}
     50%  {background-color: #C3F;}
     75%  {background-color: #F30;}
     100% {background-color: #F00;}
}
div.student {
		width:400px;
		height:200px;
		position:relative;
		margin: 0 auto;
		border:1px solid #000;
		background-color: #FFF;
     	-webkit-animation: myAnimation 2030s infinite alternate;
     	-moz-animation: myAnimation 20s infinite alternate;
     	-o-animation: myAnimation 20s infinite alternate;
     	animation: myAnimation 20s infinite alternate;
}

Download CSS3 smooth color transitions animation Example(708 bytes)