How to control the transform distance with pure JavaScript

Question

I made this http://codepen.io/adamchenwei/pen/dOvJNX

and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate an

Answer 1

Found out a better way. Soooooo much easier! I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.

Hope it helps someone else to save couple hours!

http://codepen.io/adamchenwei/pen/xRqYNj

HTML

  stuff here

CSS

.myItem {
  position: absolute;
  height: 100px;
  width: 501px;
  background-color: beige;
  transition: transform 1s;  
}

JS

setTimeout(function() {
  document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
  console.log('ran');
}, 3000);