Css 在Chrome&；中，通过关键帧实现多个背景图像位置的动画；Safari，但不是Firefox
目标是创建一个无限滚动的两层视差背景。这种效果在Mac Chrome和Safari中非常有效，但在Firefox中会出现口吃。你知道为什么吗？谢谢Css 在Chrome&；中，通过关键帧实现多个背景图像位置的动画；Safari，但不是Firefox,css,animation,background-image,background-position,keyframe,Css,Animation,Background Image,Background Position,Keyframe,目标是创建一个无限滚动的两层视差背景。这种效果在Mac Chrome和Safari中非常有效，但在Firefox中会出现口吃。你知道为什么吗？谢谢 <style> body { background-color: black; } #container { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } @-webkit-keyframes
<style>
body {
background-color: black;
}
#container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
@-webkit-keyframes scroll {
100% {
background-position: 0 0;
}
}
@keyframes scroll {
100% {
background-position: 0 0;
}
}
.bg1 {
-webkit-animation: scroll 2.5s linear infinite;
animation: scroll 2.5s linear infinite;
background-image: url(path/to/image);
background-position: 0 -156px;
background-size: 128px 156px;
height: 100%;
opacity: 0.5;
position: fixed;
width: 100%;
}
.bg2 {
-webkit-animation: scroll 5s linear infinite;
animation: scroll 5s linear infinite;
background-image: url(path/to/image);
background-position: 0 -78px;
background-size: 64px 78px;
height: 100%;
opacity: 0.25;
position: fixed;
width: 100%;
}
</style>
<body>
<div id="container">
<div id="bg1" class="bg1"></div>
<div id="bg2" class="bg2"></div>
</div>
</body>
身体{
背景色：黑色；
}
#容器{
底部：0；
左：0；
位置：绝对位置；
右：0；
排名：0；
}
@-webkit关键帧滚动{
100% {
背景位置：0；
}
}
@关键帧滚动{
100% {
背景位置：0；
}
}
.bg1{
-webkit动画：滚动2.5s线性无限；
动画：滚动2.5s线性无限；
背景图像：url（路径/目标/图像）；
背景位置：0-156px；
背景尺寸：128px156px；
身高：100%；
不透明度：0.5；
位置：固定；
宽度：100%；
}
.bg2{
-webkit动画：滚动5s线性无限；
动画：滚动5s线性无限；
背景图像：url（路径/目标/图像）；
背景位置：0-78px；
背景尺寸：64px 78px；
身高：100%；
不透明度：0.25；
位置：固定；
宽度：100%；
}
但是对于firefox，在一些旧版本中应该有-moz前缀。我能够绕过firefox的引擎无法跟上重复背景的完整窗口分割的串联动画…而是切换到两个动画、图案、完整窗口SVG 因此，我没有在CSS中将
关键帧动画divs<svg id="parallax2" width="100%" height="200%" style="display: none;">
<defs>
<pattern id="pattern2" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="-40" y="-40" height="100" width="100" xlink:href="path/to/image"></image>
</pattern>
</defs>
<rect width="100%" height="200%" fill="url(#pattern2)">
<animateTransform
attributeName="transform"
type="translate"
from="0 -50"
to="0 50"
dur="3750ms"
repeatCount="indefinite"
/>
</rect>
</svg>
<svg id="parallax1" width="100%" height="200%" style="display: none;">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse" height="200" width="200">
<image x="-40" y="-40" height="200" width="200" xlink:href="path/to/image"></image>
</pattern>
</defs>
<rect width="100%" height="200%" fill="url(#pattern1)">
<animateTransform
attributeName="transform"
type="translate"
from="0 -100"
to="0 100"
dur="3750ms"
repeatCount="indefinite"
/>
</rect>
</svg>
感谢您的贡献。我对Firefox的理解是，当前版本的Firefox不需要为
@关键帧动画