Codepen-基本的Javascript动画不起作用

Question

上下文-我只是想学习Javascript动画，并且正在使用CodePen。 我正在尝试将div块移动一定距离。 我用W3Schools代码验证了我的代码，但似乎没有什么错位。

问题-动画不起作用。 当我在W3Schools中尝试相同的代码时，请尝试一下自己的方法，它可以工作。

codepen链接- http://codepen.io/tusharsaurabh/pen/xEoXex?editors=1111

var elem = document.getElementById("block");
pos = 0;

var animation = setInterval(doMove, 5);

function doMove() {
  pos++;
  console.log(pos);
  elem.style.left = pos + 'px';
  elem.style.top = pos + 'px';

  if (pos >= 200) {
    clearInterval(animation);
  }
}

浏览器-Safari

请让我知道如何在CodePen中制作动画。

Answer 1

用于设置元素动画的属性为left和top ，这仅在元素的position属性为非静态（例如relative ， absolute ）时才影响元素的位置。

通过将元素设置为这两个位置之一，您的Codepen将开始工作：您可以在此处进行检查。

有关MDN的更多详细信息，请参见。