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

属性は、そのposition属性が非静的（例えばrelative、absolute）である場合にのみ要素の位置に影響leftとtop、です。

これらの2つの位置のいずれかに要素を設定すると、Codepenが機能し始めます。hereを確認できます。

さらに詳しい情報はon MDNでもご利用いただけます。