javascript - jQuery background-position 动画运行更流畅

Question

我在 jQuery 中有一个这样的图案背景动画。

        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

        window.setInterval(function() {
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
            y--;
        }, 150);

实例http://codepen.io/anon/pen/emMxXa

但它相当“紧张”。我怎样才能让这样的东西运行得更流畅、更慢。

Answer 1

您想使用并研究 CSS 过渡 和 CSS 动画 以实现真正的流畅。

-webkit-animation: move 30s linear 0s infinite alternate;
-moz-animation: move 30s linear 0s infinite alternate;

@-webkit-keyframes move { 
  from { background-position: 0px 0px } to { background-position: 0px 400px }  
}

@-moz-keyframes move { 
  from { background-position: 0px 0px } to { background-position: 0px 400px }  
}

演示:http://codepen.io/anon/pen/EaEMvy