Анимация элемента в слайдере

var circle = document.querySelector('.circle'); 
 
function gotoStep(step) { 
  const currentStep = circle.getAttribute('data-current'); 
  if (currentStep !== undefined) { 
    circle.classList.remove('step' + currentStep); 
  } 
  circle.setAttribute('data-current', step); 
  circle.classList.add('step' + step); 
}

.container { 
  position: relative; 
  width: 100%; 
  height: 400px; 
  border: 1px solid black; 
} 
 
.circle { 
  position: absolute; 
  border-radius: 50%; 
  border: 2px solid blue; 
  width: 40px; 
  height: 40px; 
  transition: top 2s, left 2s; 
} 
 
.circle.step0 { 
  top: 0; 
  left: 0; 
} 
 
.circle.step1 { 
  top: 50px; 
  left: calc(100% - 44px); 
} 
 
.circle.step2 { 
  top: 100px; 
  left: 50px; 
}

<button onclick="gotoStep(0)">step 0</button> 
<button onclick="gotoStep(1)">step 1</button> 
<button onclick="gotoStep(2)">step 2</button> 
<div class="container"> 
  <div class="circle step0" data-current='0'></div> 
</div>