如何在js中永久更改背景位置？

Question

我知道如何将动画从A点运行到B点，可以这么说，但不知道如何在一个圆圈中连续运行。下面是一个准备好的小代码：

＆＃13;

＆＃13;

.bg {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg) top left/30%;
  animation: bg 2s cubic-bezier(0, -0.02, 1, 0.99);
}
@keyframes bg {
  0% {
    background-position: left -100px;
  }
  100% {
    background-position: left 0px;
  }
}

＆＃13;

<div class="bg"></div>

＆＃13;

＆＃13;

＆＃13;

脚本帮助

Answer 1

如果通过：

  

连续跑圈

您的意思是在循环中运行动画，然后您可以添加infinite animation-iteration-count属性。在短代码中，您只需将infinite添加到animation媒体资源即可。见demo：

＆＃13;

＆＃13;

.bg {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg) top left/30%;
  animation: bg 2s cubic-bezier(0, -0.02, 1, 0.99) infinite;
}
@keyframes bg {
  0% {
    background-position: left -100px;
  }
  100% {
    background-position: left 0px;
  }
}

＆＃13;

<div class="bg"></div>

＆＃13;

＆＃13;

＆＃13;

编辑：jQuery解决方案

使用jQuery，您可以使用animate()函数来达到同样的效果。

＆＃13;

＆＃13;

// bg animation function
function bgAnimate(speed) {
	// define bg div
  var el = $('.bg');
  // get current background y-axis position and convert to integer (strips `px`)
  var posY = parseInt(el.css("background-position-y"));
	
  // animate element
  el.animate({
  	'background-position-y': posY + 100 // add 100px
  },{
    duration: speed,
    easing: 'linear',
  	complete: function() {
    	bgAnimate(speed); // repeat aniamtion (loop)
    }
  });
}
bgAnimate(1000); // call function

＆＃13;

html, body {padding: 0;margin: 0;}

.bg {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="bg"></div>

＆＃13;

＆＃13;

＆＃13;