title: css3 animation change continuously
body: <p>i am trying to implement css3 animations....
  i am planning to change my aimations affects continuously in cycle
  but the problem is after one cycle it stops in red color it does not change its color further....
  how to continue the cycle...</p>
  
  <p><a href="http://jsfiddle.net/9CZFS/" rel="nofollow">http://jsfiddle.net/9CZFS/</a></p>
  
  <p>providing my code below</p>
  
  <pre><code>div
  {
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
  -o-animation:myfirst 5s; /* Opera */
  }
  
  @keyframes myfirst
  {
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
  }
  
  @-moz-keyframes myfirst /* Firefox */
  {
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
  }
  
  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
  }
  
  @-o-keyframes myfirst /* Opera */
  {
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
  }
  </code></pre>