javascript - jQuery 后台定位 vs CSS 动画定位的 bug 和效率

Question

我目前在一个网站上工作，其中舞台/英雄有一组带有循环背景图像(文本图像)的 div，我正在使用 jQuery 来设置它们的位置动画以呈现“海洋”的外观图像在屏幕上移动。

var position = 0;

setInterval(function () { 
    position -= 1;
    $(".sub-image-1").css({ "background-position":+ position +"px 0px" }) 
}, 20 );

setInterval(function () { 
    position -= 1;
    $(".sub-image-2").css({ "background-position":+ position +"px 0px" }) 
}, 140 );

setInterval(function () { 
    position -= 1;
    $(".sub-image-3").css({ "background-position":+ position +"px 0px" }) 
}, 200 );

.stage-image {
    width:100vh;
    height:30vh;
}

.stage-sub-image { 
    position:absolute; top:0;
    width:100%;
    height:100%;
    background-repeat:repeat-x;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage-image">
  <div class="stage-sub-image sub-image-1" style="background:url(https://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png)"></div>
  <div class="stage-sub-image sub-image-2" style="background:url(https://upload.wikimedia.org/wikipedia/commons/b/be/Blender3D_Lisc_lipy-Transparent.png)"></div>
  <div class="stage-sub-image sub-image-3" style="background:url(https://cdn0.iconfinder.com/data/icons/ball/256/transparent.png)"></div>
</div>

我很好奇是否有更好的方法来解决这种浏览器密集度较低的问题。我觉得 setInterval 在这种情况下会给网站增加很多不必要的开销。有没有更好的方法来处理这样的事情？除了性能问题，通过 JS 完成的动画非常不稳定，我希望效果更流畅。

这是我目前拥有的 CodePen:

https://codepen.io/stufu/pen/GvJdxq

更新

@FuriousD 在下面给出了一个使用 CSS 来实现这一点的好建议，虽然这更接近我所希望的，但 CSS 动画会在到达背景位置的末端时导致跳跃。

这是一个基于他们的答案的 Codepen，但在动画完成后有一个“跳跃”的新问题:

codepen.io/stufu/pen/YxXaLR

Answer 1

您可以使用 CSS 动画。请注意，图像的宽度 (-250px) 需要硬编码到动画中，但这可以动态生成:

var containers = $('.stage-sub-image');
var containerWidth = $(containers[0]).width();
var styleElem = document.createElement('style');
var animClass = 'animateMe';

document.body.append(styleElem);

styleElem.innerHTML =
  '@keyframes animBg {' +
    'from { background-position: 0px top; }' +
    'to { background-position: -' + containerWidth + 'px top }' +
  '}' +
  '.' + animClass + ' { animation: animBg 10s linear infinite; background-size: 100% auto; }';


containers.addClass(animClass);

.stage-sub-image {
  width: 200px;
  height: 130px;
  background-color: #909;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage-image">
    <div class="stage-sub-image" style="background-image:url(http://via.placeholder.com/250x130)"></div>
    <div class="stage-sub-image" style="background-image:url(http://via.placeholder.com/250x130)"></div>
    <div class="stage-sub-image" style="background-image:url(http://via.placeholder.com/250x130)"></div>
</div>