动画两个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);
}

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

这是fiddle：

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

如何顺利修复到运行？

Answer 1

我假设您对每个周期开始和结束时的 "speeding up" 和 "slowing down" 不满意。看看 'easing':

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

easing (default: swing)

A string indicating which easing function to use for the transition.

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

Answer 2

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

@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;
}

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

Answer 3

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

这是我的代码：

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

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

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

Animating two divs to loop right to left indefinitely

html

javascript

css

jquery

jquery-animate

HTML

CSS

JavaScript