Как сделать чтобы элемент плавно изменял свою позицию?

function poehal()
{var h =0;
var pp = document.getElementById ('spisok');
var zz = pp.style.left;
if (zz<400)
{h+=1;
zz = h +'px';
setTimeout (poehal, 1500);}
 
else
{h-=1;
zz = h +'px';
setTimeout (poehal, 1500);
}
 
}

var zz = pp.style;
...
zz.left = h + 'px';

var requestAnimationFrame = window.requestAnimationFrame
 || function(fn){return setTimeout(fn, 1000 / 60)}
;
 
var canvas = document.body.appendChild(document.createElement("canvas"));
var context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
 
var ball = {
    x: 0,
    y: 0,
    r: 10,
};
 
var draw = function(){
    var canvas = context;
    canvas.beginPath();
    canvas.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
    
    canvas.strokeStyle = "#000";
    canvas.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    canvas.stroke();
}
 
var angle = 0; // degrees
var r = 20;
var update = function(){
    var translateX = 50;
    var translateY = 50;
    ball.x = Math.sin(angle / 180 * Math.PI) * r + translateX;
    ball.y = Math.cos(angle / 180 * Math.PI) * r + translateY;
    ball.r = Math.sin((angle * 4) / 180 * Math.PI) + 1 * 10;
    angle += 5;
}
 
var animationLoop = function(){
    update();
    draw();
    requestAnimationFrame(animationLoop);
}
 
animationLoop();

  var div = document.getElementById('test');
 
  function infinityMove(el) {
 
    var left = parseInt(getComputedStyle(el).left, 10);
 
    setTimeout(function timer(){
 
      left += (setWay(left)) ? 1 : -1;
      el.style.left = left + 'px';
 
      setTimeout(timer, 0);
 
    }, 10);
 
  }
 
  var setWay = (function() {
 
    var ltr = true;
 
    return function(position) {
 
      if(position >= 400) {
       ltr = false;
      }
      if(position <= 0) {
         ltr = true;
      }
 
      return ltr;
 
    }
  
  })();
 
  infinityMove(div);

function setWay(position)
  {
  var ltr = true;
   if(position >= 400) {
       ltr = false;
      }
      if(position <= 0) {
         ltr = true;
      }
 
      return ltr;
 
    
  }

if (setWay(left) && opacity!=0)
          { 
             
             opacity-=0.008;
            el.style.opacity = opacity;
              
              
          }
          else if (!setWay(left) && opacity!=1)
            {opacity+=0.008;
            el.style.opacity = opacity;
            }

var div = document.getElementById('test');
 
  function infinityMove(el) {
 
    var left = parseInt(getComputedStyle(el).left, 10),
        opacity = 1,
        max = 400;
 
    setTimeout(function timer(){
 
      left += (setWay(left)) ? 1 : -1;
      opacity = 1 - (left/max);
 
      el.style.left = left + 'px';
      el.style.opacity = opacity;
 
      setTimeout(timer, 0);
 
    }, 10);
 
  }
 
  var setWay = (function() {
 
    var ltr = true;
 
    return function(position) {
 
      if(position >= 400) {
       ltr = false;
      }
      if(position <= 0) {
         ltr = true;
      }
 
      return ltr;
 
    }
  
  })();
 
  infinityMove(div);