CSS3关键帧动画的位置根据窗口大小变化答案

【问题标题】：Position of CSS3 Keyframe Animation Changes Based on Window SizeCSS3关键帧动画的位置根据窗口大小变化
【发布时间】：2012-12-27 10:30:24
【问题描述】：

我在使用 CSS3 制作关键帧动画时遇到了一些问题。动画图像的位置根据窗口/屏幕大小而变化。我试图找到解决这个问题的方法，但我迷路了。我试图指定一个边界，以便动画只在其中播放，但它不起作用。

请参阅here，并尝试调整窗口大小。我知道这与position:absolute 有关。我的最终目标是让空间背景从左到右移动，但如果有意义的话，仍然在中心位置。

感谢您的帮助。

【问题讨论】：

标签： css css-animations

【解决方案1】：

问题是margin-left和margin-right属性被设置为auto，这会调整tdr-main的左边距，而space-bg的动画会修改绝对左边的位置。当窗口调整为更小的尺寸时，tdr-main 的左边距缩小到 45px，但背景图像的左边位置仍然在 342px 和 450px 之间移动。

如果您将space-bg 嵌入到具有自动边距的同一个容器中，

<div id="tdr-main">
        <div id="space-bg">
        </div>
        [...]
</div>

那么两者都将保持居中，并且 space-bg 上的位置将相对于居中的容器 div。只需使用具有绝对或相对定位的 z-index 来保持正确堆叠。

【讨论】：

非常感谢您的回复。我试过这样做，但我仍然遇到同样的问题。我将tdr-back 移动到tdr-main 内部，它的左右边距设置为自动。请注意tdr-main 是主图形，而tdr-back 是正在移动的空间背景。抱歉，我更改了一些术语。