javascript - 使用 .animate 移动 CSS 形状

Question

我正在尝试使用 css、jquery 和 html 为学校制作图形演示文稿，我需要一个矩形在屏幕上移动。我做了一些研究，并尝试使用 animate 函数的几种变体，但它不起作用，它只位于窗口的左侧。

这是我的引用代码:

var derp = 20;
function scroll() {
  var scrollLeft = Math.floor(Math.random() * 100);
  $('#rectangle').animate({
    left: scrollLeft "px",
  }, derp, function() {
    scroll();
  });
}

setInterval(100, scroll());

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

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
}

.rectangle {
  width: 20px;
  height: 100%;
  background: black;
}

#rectangle {
  left: 10px;
  position: absolute;
}

img,
div,
p,
body {
  margin: 0px;
  padding 0px;
}

<div class="rectangle"></div>

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

Answer 1

您只能使用 CSS 来完成此操作。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: anim 3s forwards alternate;
  animation-iteration-count: 6;
}

@keyframes anim {
  from {
    left: 0px;
  }
  to {
    left: 200px
  }
}

<div></div>