如何实现一个 webkit 动画：backgroundmove答案

【问题标题】：How to implement a webkit animation: backgroundmove如何实现一个 webkit 动画：backgroundmove
【发布时间】：2011-11-23 18:46:22
【问题描述】：

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

我为基本的 -webkit-backgroundmove 动画编写了一个小 CSS 简介，但它不起作用！我已经在 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”的文档，所以如果有人知道在哪里可以找到它，那将是一个很大的帮助！谢谢 -

【问题讨论】：

标签： css animation background webkit

【解决方案1】：

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

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

    to {
        background-position: right top;
    }
}

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

【讨论】：