星星的视差背景（加上 CSS3 关键帧 动画）

关于 CSS3 为我们带来的这些花哨的过渡和动画是否属于 CSS，存在一些争议。 可能会有人争论，像那样四处移动的东西是“行为”而不是“设计”，因此属于 JavaScript。 我不同意这种观点，并且动画绝对是“设计”，如果我们可以将这些内容保留在 CSS 中，我们应该这样做。 因此，我正在更新这个想法（参见上面的原始链接）以利用 CSS3 关键帧动画。

查看演示   下载文件

声明关键帧动画

这就是声明关键帧动画的方式。 我们将把动画命名为“STAR-MOVE”

@-webkit-keyframes STAR-MOVE {
	from {
		left: 0;
		top: 0;
	}
	to { 
		left: -10000px;
		top: -2000px;
	}
}

@-webkit-keyframes STAR-MOVE {
	from {
		background-position: 5% 5%
	}
	to { 
		background-position: 1300% 600%
	}
}

您不限于“from”和“to”，您可以根据百分比在其中插入更多内容。 比如40% { }当动画完成 40% 时，它将动画到这些属性/值。

我们的动画非常简单，我们将为 background-image 的位置制作动画，基本上将元素拉向左上角。 并非所有属性都能够制作动画，但通常任何具有数值的属性（包括颜色）都可以。 但是，例如，您无法将字体从 Helvetica 动画到 Georgia。

这些属性将覆盖为指定属性设置的任何先前设置。 因此，例如，由于 IE 不支持这些属性，您可能希望使用常规 CSS 设置属性，以在没有动画的情况下使设置合理。 然后知道这些属性将被动画的 from/0% 属性覆盖。

使用关键帧动画

我们有三个“层”的星星，每个层都覆盖整个屏幕，并使用重复的 alpha 透明背景图形星星层。 我们可以对所有三个 div 调用相同的动画，只是持续时间不同。

#background {
	background: black url(../images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#midground {
	background: url(../images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 150s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#foreground {
	background: url(../images/foreground.png) repeat 35% 35%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 300;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

较大的星星移动得更快（它们在错觉中“更近”，因此应该更快地移动）。 它们看起来移动得更快，因为动画的持续时间更短，因此它们需要在更短的时间内移动更远的距离。

动画使用“缓动”函数。 也就是说，将应用一个数学公式来控制动画“加速”和减速的速度。 没有缓动，动画可能会显得生硬和笨拙。 webkit 中的默认值为“ease”，它会慢慢使动画加速，然后慢慢减速。 在这个特定示例中，这没有意义，因为在最大的星星使用的 100 秒结束时，动画速度非常慢，以至于它背后的星星移动得更快（很奇怪）。 因此请注意，在上面的代码中，我们将缓动重置为“linear”。 有关完整列表，请 参见此处。

浏览器支持

目前只有 WebKit 浏览器（Safari、Mobile Safari、Chrome）。 我知道 Firefox 3.7 将支持过渡，但我不知道它是否会为关键帧动画使用自己的前缀。 如果你知道，请告诉我。