如何让球左右移动？

Question

I have the ball moving diagonal. I need to get it moving left and right at a speed of 2 pixels per update. After it reaches 800 pixels to the right I need to get it to move left.

Css code

<style>
#animationArea {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
}

.pbox {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #FF0000;
  border-radius: 25px;
}

  </style>

JsCode

var dvAnimationArea = document.querySelector("#animationArea");

//create the 'ball' for this animation
var ball = document.createElement('div');
ball.classList.add('pbox');
dvAnimationArea.appendChild(ball);

//position for our 'ball'
var x = 0;
var y = 0;

//start the animation interval
setInterval(update, 30);
function update() {
  ball.style.top = y + "px";
  ball.style.left = x + "px";

  x++;
  y++;
}

Answer 1

I left out the JS entirelly. This animates the ball 2px at a time. I can do this in vanilla js on click if you like, make it pause on hover etc. Just let me know what the goal is and how long the animation should take.

.pbox {
width: 20px;
height: 20px;
position: absolute;
background-color: #FF0000;
border-radius: 25px;
animation:hello 5s infinite steps(400, end);}

http://codepen.io/damianocel/pen/bVOgaZ

And let me know you want the container to really be 400px wide, that is no typo?