how to keep reloading animations

Question

I want my elements with id 1 to 8 to change their animation property randomly every 1 second so I wrote this function .but it is not working as expected. What am i doing wrong here? and how do I implement this?

js

window.onload=function animate(){
  
    setInterval(setanim(),1000)
    
}

function setanim(){
    evencounter="bottom";
    oddcounter="right"
    var myArray1 = ['bottom', 'up','left','right']; 
   for ( i = 1; i <=8; i++) {
                var rand = myArray1[(Math.random() * myArray1.length) | 0]
            document.getElementById(i).style.animation=rand+" 5s ease-in-out infinite";
            console.log('setting interval');
    
   }
   
}

css

 @keyframes bottom {
    0% {transform: translateY(0px);}
    50%{transform: translateY(550px);}
    100% {transform: translateY(0px);}
  }
  @keyframes right{
    0% {transform: translateX(0px);}
    50%{transform: translateX(250px);}
    100% {transform: translateX(0px);}
  }
  @keyframes left{
    0% {transform: translateX(0px);}
    50%{transform: translateX(-250px);}
    100% {transform: translateX(0px);}
  }
  @keyframes up{
    0% {transform: translateY(0px);}
    50%{transform: translateY(-550px);}
    100% {transform: translateY(0px);}
  }