Codepen - Основная анимация Javascript не работает

Question

Контекст. Я просто пытаюсь изучить Javascript Animation, и я использую CodePen. Я пытаюсь переместить div-блок на определенное расстояние. Я проверил свой код с кодом W3Schools, и ничего не кажется неуместным.

выпуск - анимация не работает. Когда я пытаюсь использовать тот же код в W3Schools, ящик try-it-yourself, он работает.

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 начнет работать: вы можете проверить его here.

Более подробная информация также доступна on MDN.