Как анимировать через JS?

Question

[maestro07]

var div = document.createElement('div');

function createDiv() {
  div.style.width = '100px';
  div.style.height = '100px';
  div.style.backgroundColor = '#000';
  document.body.appendChild(div);
}

function moveRight() {
  var start = Date.now();
  //   var timer =
  setInterval(function () {
    var timePassed = Date.now() - start;
    div.style.left = timePassed / 5 + 'px';
    console.log(div.style.left);
    // if (timePassed > 2000) clearInterval(timer);
  }, 1000);
}

createDiv();
setTimeout(function () {
  moveRight();
}, 1000);

- Можно использовать все фичи языка, работающие в последней версии Google Chrome.
- Функция вызывается однократно на пустой странице браузера (пустой тег body).
- В момент вызова функция рисует чёрный квадрат со стороной 100px в левом верхнем углу окна.
- Через секунду после вызова функции квадрат начинает равномерное движение вправо со скоростью 100px в секунду.
не получается анимировать, подскажите в чем проблема

Comments

[Tema Smirnov]

Добавьте: div.style.position = 'absolute';
тогда позиционирование у элемента будет абсолютным и будет работать свойство left

Answer 1

[tundramani]

и не забываем что плавно анимируется только трасформация и прозрачность