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

如何使这个css3背景改变顺利循环？

1 个答案: