Question

我有下面的内容here。

我希望背景像在ff中那样移动，但是由于某种原因它不能在chrome中工作？这是我做错了什么，还是我在webkit中不支持的东西？

    <div id="box"></div>

    @keyframes movingbg {
        from {
            background-position:0 0;
        }
        to {
            background-position:center center;
        }
    }

    #box {
        -webkit-animation-name: movingbg;
        -o-animation-name: movingbg;
        -ms-animation-name: movingbg;
        -moz-animation-name: movingbg;
        animation-name: movingbg;
        -webkit-animation-iteration-count: 1;
        -o-animation-iteration-count: 1;
        -ms-animation-iteration-count: 1;
        -moz-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-duration: 5s;
        -o-animation-duration: 5s;
        -ms-animation-duration: 5s;
        -moz-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        background: url("http://lorempixel.com/600/400/sports/") no-repeat scroll center 0 rgba(0, 0, 0, 0);
        width: 300px;
        height: 200px;
    }

Answer 1

DEMO

您在ID中有供应商前缀，但不幸的是，您将其从关键帧调用中删除了......

只需将此代码添加到您的CSS代码中即可：

@-webkit-keyframes movingbg {
    from {
        background-position:0 0;
    }
    to {
        background-position:center center;
    }
}

您可以将动画设置为在-webkit浏览器中使用

Answer 2

您可以使用-webkit-进行safari和chrome

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

希望这可以帮到你:)

css3关键帧转换不适用于chrome？

2 个答案: