动画两个div无限期地从右到左循环

Question

这是我的代码：

HTML

<div class="screen screen1"></div>
<div class="screen screen2"></div>

CSS

.screen{
    width: 100%;
    height: 50%;
    position: absolute;
    background-color:#001;
    background-image: radial-gradient(white 15%, transparent 16%),
    radial-gradient(white 15%, transparent 16%);
    background-size:60px 60px;
    background-position: 0 0, 30px 30px;
}

.screen2{
    left: 100%;
}

的JavaScript

$(document).ready(function(){
    screen1 = $('.screen1');
    screen2 = $('.screen2');

    move(screen1, screen2);
});

function move(first, second){
    first.animate({left: '-100%'}, 3000, function(){
        first.css('left', '100%');
        move(second, first);
    });
    second.animate({left: 0}, 3000);
}

我想动画两个div来使用jQuery制作无限背景重复动画。我走到这一步，除了在向右发送.screen1时发生的小停顿外，它在大多数情况下效果很好。

这是小提琴：

https://jsfiddle.net/mavisme/a1275tuv/

如何修复它以顺利运行？

Answer 1

我认为你对每个周期开始和结束时的“加速”和“减速”都不满意。看看'缓和'：

function move(first, second) {
    first.animate({
        left: '-100%',
    }, 3000, 'linear', function() {
        first.css('left', '100%');
        move(second, first);
    });
    second.animate({
        left: 0
    }, 3000, 'linear');
}

  

缓和（默认：摆动）

     

一个字符串，指示用于转换的缓动函数。

http://api.jquery.com/animate/

Answer 2

你应该完全放弃并尝试 jQuery CSS动画：

＆＃13;

＆＃13;

@keyframes animate {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px 0;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html, body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #001;
  background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%);
  background-size: 60px 60px;
  animation: animate 300ms linear infinite;
}

＆＃13;

<div class="screen"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

动画两个div无限期地从右向左循环

这是我的代码：

https://jsfiddle.net/a1275tuv/5/

 $(function(){
        var x = 0;
        setInterval(function(){
            x-=1;
            $('.screen').css('background-position', x + 'px 0');
        }, 10);
    })