How to make this css3 background change a smooth loop? - html

Question

I have created a css3 background change on my div tag, but when it loops, it does not loop with the transition. It loops as if someone has just refreshed the page. Could you guys help me into making this a smooth loop, so it loops using the transition
My code is the following:
.slideshow_container{
background-color: #ccc;
position: absolute;
width: 100%;
height: 300px;
top: 160px;
left; 0;
right:0;
z-index:1;
background:#014EAA;
animation:myfirst 25s infinite;
-moz-animation:myfirst 25s infinite; /* Firefox */
-webkit-animation:myfirst 25s infinite; /* Safari and Chrome */
-o-animation:myfirst 25s infinite; /* Opera */
box-shadow: 0 4px 2px -2px gray;
}
#keyframes myfirst
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-o-keyframes myfirst /* Opera */
{
from {background:#014EAA;}
to {background:#467EBB;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: #014EAA;}
50% {background: #014EAA;}
50% {background: #467EBB;}
}

Answer 1

http://jsfiddle.net/FqF57/1/
The issue seems to be that your using hex values.
I've tried with just switching from background with color lightblue, to background navy and it works.
#keyframes myfirst
{
from {background:lightblue;}
to {background:navy;}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background:lightblue;}
to {background:navy;}
}
And I've also tried with using rgb and that works as well.
http://jsfiddle.net/rF3AH/1/
#keyframes myfirst
{
from {background: rgb(100,100,180);}
to {background:rgb(200,200,250);}
}
#-moz-keyframes myfirst /* Firefox */
{
from {background: rgb(100,100,180);}
to {background:rgb(200,200,250);}
}