所以我在CSS3编码视差效果，页面 Headers 有3层 . 我的样式表如下：

#graphic-layer { /* overall properties for graphic layers */
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
#graphic-layer.header { /* header-class */
    width: 100%;
    height: 150px;
    background-repeat: repeat-x;
    -webkit-animation-name: header;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
#graphic-layer.header:nth-of-type(1) {  /* parallax layer 1 */
    background-image: url('images/header-background.jpg');
    -webkit-animation-duration: 100s;
}
#graphic-layer.header:nth-of-type(2) {  /* parallax layer 2 */
    background-image: url('images/header-middle.png');
    -webkit-animation-duration: 80s;
}
#graphic-layer.header:nth-of-type(3) { /* parallax layer 3 */
    background-image: url('images/header-foreground.png');
    -webkit-animation-duration: 60s;
}
@-webkit-keyframes header {  /* keyframes */
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0; /* <- PROBLEM HERE */
    }
}

EDIT: HTML，只是带有类头的图形层的三个实例：

<div id="graphic-layer" class="header"></div>
<div id="graphic-layer" class="header"></div>
<div id="graphic-layer" class="header"></div>

到现在为止还挺好 . 请注意，我的 Headers 是屏幕宽度的100％ . 如果我将关键帧的背景位置设置为100％到 background-position: 1920px 0; （我的屏幕/窗口宽度），但是一旦窗口的分辨率发生变化，这显然将不再起作用 . 例如，如果我将值设置为较低，为500px，则图片移动500像素并跳回到开始但我希望它在没有"jumping"的情况下连续移动 .

所以我需要一个解决方案，使图像移动到 Headers 宽度的100％，然后重新启动动画 . 但是当我将关键帧的背景位置设置为100％到 background-position: 100% 0; 时，它根本不会移动 .

这里有什么问题？为什么百分比值不起作用？

EDIT:

自己找到了答案！

这只是推理中的一个愚蠢的错误 . #graphic-layer.header 不必是 Headers 的100％，而是100％的图像，这是一个静态值（在本例中为1920px） . 因此，如果我将宽度设置为3480px（1920x2），然后将关键帧更改为以下内容：

@-webkit-keyframes header {  /* keyframes */
    0% {
        left: 0;
    }
    100% {
        left: -1920px; /* <- Image size */
    }
}

...然后 Headers 类向左移动1920px并重新开始，因为类的宽度加倍，看起来它是无穷无尽的图像 . 无需相对百分比值！

css css3 css-animations