css - 如何实现一个webkit动画 : backgroundmove

Question

我见过某种 webkit 动画类型:backgroundmove。它基本上只是在页面上滚动你的背景，等等。

我已经为基本的 -webkit-backgroundmove 动画编写了一些 css blurb，但它不起作用!我已经在 IE9/FF4/Chrome(最新)上尝试了一切。问题:是否有什么东西会干扰动画，使其无法启动？背景出现了，但不是线性滚动的，所以我猜测是干扰或 -webkit-animation 有问题

我的 CSS 非常基础:

div#wrapper.cloud-animation {
    background-image: url(../images/clouds.png);
    background-size: 120%;
    background-repeat: repeat-x;
    background-position: -10px 150px;
    -webkit-animation: backgroundmove infinite 50s linear;
}

我什至无法在网上找到“webkit backgroundmove”的文档，所以如果有人知道在哪里可以找到它，那将是一个很大的帮助!谢谢-

Answer 1

backgroundmove是自定义动画，不存在，需要自己定义。

@-webkit-keyframes backgroundmove {
    from {
        background-position: left top;
    }

    to {
        background-position: right top;
    }
}

看看https://developer.mozilla.org/en/css/css_animations