Codepen - 基本的Javascript动画无效

Question

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

问题 - 动画无效。当我在W3Schools尝试使用相同的代码时，试一试它，它可以工作。

codepen link - 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属性为非静态时才会影响元素的位置（例如{{1} }，relative）。

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

还提供了更详细的信息on MDN。