html - 如何让这个css3背景变化平滑循环？

Question

我在我的 div 标签上创建了一个 css3 背景变化，但是当它循环时，它不会随着过渡而循环。它循环播放，就好像有人刚刚刷新了页面一样。你们能帮我把它变成一个平滑的循环吗，所以它使用过渡循环

我的代码如下:

   .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/问题似乎是您使用的是十六进制值。
我试过从浅蓝色背景切换到海军蓝背景，效果很好。

@keyframes myfirst
{
    from {background:lightblue;}
    to {background:navy;}
}

@-moz-keyframes myfirst /* Firefox */
{
    from {background:lightblue;}
    to {background:navy;}
}

---

我也尝试过使用 rgb，效果也不错。

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);}
    }