javascript - css3 关键帧过渡在 chrome 中不起作用？

Question

我有下面的也可用here .

我希望背景像在 ff 和 ie 中那样移动，但由于某种原因它在 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 中有 vendor 前缀，但不幸的是您在关键帧调用中遗漏了它们...

只需将其添加到您的 CSS 代码中:

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

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