I think I managed to get what you were looking for. You were almost there, you just needed to make it a bit simpler.

Instead of changing their classnames, I changed their animation style from Javascript. If you need to change their classnames for another reason, you can do it, too.

Here you have a snippet. Please take into account that the slider dimensions, margins, etc. might look different since this viewport has another size.

var slideIndex = 1;
showDivs(slideIndex);

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    slideIndex += n;
    
  if (slideIndex > x.length) {
      slideIndex = 1;
    }

  if (slideIndex < 1) {
      slideIndex = x.length;
    }

  if (n == 1){
    x[slideIndex-1].style.animationName = "MoveLeft";
  }else if (n == -1){
    x[slideIndex-1].style.animationName = "MoveRight";
  }

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }

    x[slideIndex-1].style.display = "block";  
}

 .mySlides {position: absolute;animation: MoveLeft 1s;animation-fill-mode: forwards; }
    
        .classname { animation-name: MoveRight;position: absolute;-animation-fill-mode: forwards;}
    
    @keyframes MoveLeft {
      0%   {position: absolute; margin-top: 50px; margin-left: 62.5%; width: 150px; height: 200px;}
      100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
      to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
    }
    
    @keyframes MoveRight {
      0%   {position: absolute; margin-top: 50px; margin-left: 25%; width: 150px; height: 200px;}
      100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
      to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
    }

 <div style="position: absolute; margin-top: 5%; margin-left: 5%; width: 90%; height: 300px;">
            <div style="position: relative; width: 100%; height: 100%;">
                <div style="position: absolute; margin-top: 50px; margin-left: 25%; width: 20%; height: auto;"><img  id="BackaImage" onclick=" showDivs(-1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
                <img class="mySlides" id="unique" src="https://dummyimage.com/300x400/000/fff">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/ff00ff/2d3bfc">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/FF0000/FF00">
                <div style="position: absolute; margin-top: 50px; margin-left: 62.5%; width: 20%; height: auto;"><img onclick="showDivs(+1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
            </div>
        </div>

I am currently trying to make a Slideshow that is animated, so when you click the plusDiv(-1) Function the Box comes from the left Div, yet when you click the plusDiv(+1) Function it comes from the right div. Currently I have got it to where it comes from the right and partially to the left.

The Error:
The Javascript only grabs the first “mySlides” whereas it should grab the previous slide shown. So if on Slide 3, make Slide 2 come up.

Any help would be greatly appreciated, I have been trying to do this for a few hours but nothing seems to be doing the trick.
CSS:

<style>
    .mySlides {position: absolute;animation: MoveLeft 1s;animation-fill-mode: forwards; }

    .classname { animation-name: MoveRight;position: absolute;-animation-fill-mode: forwards;}

@keyframes MoveLeft {
  0%   {position: absolute; margin-top: 50px; margin-left: 62.5%; width: 150px; height: 200px;}
  100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
  to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
}

@keyframes MoveRight {
  0%   {position: absolute; margin-top: 50px; margin-left: 25%; width: 150px; height: 200px;}
  100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
  to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
}
</style>
`

HTML:

<div style="position: absolute; margin-top: 5%; margin-left: 5%; width: 90%; height: 300px;">
            <div style="position: relative; width: 100%; height: 100%;">
                <div style="position: absolute; margin-top: 50px; margin-left: 25%; width: 20%; height: auto;"><img  id="BackaImage" onclick="onClick(); plusDivs(-1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
                <img class="mySlides" id="unique" src="https://dummyimage.com/300x400/000/fff">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/ff00ff/2d3bfc">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/FF0000/FF00">
                <div style="position: absolute; margin-top: 50px; margin-left: 62.5%; width: 20%; height: auto;"><img onclick="plusDivs(+1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
            </div>
        </div>

JS:

   function onClick(){
    document.getElementById('unique').className ='mySlides classname';

     setTimeout(function() {
       var element = document.getElementById("unique");
        element.classList.remove("classname");
        document.getElementById('unique').className ='mySlides';
   }, 3000);
  }

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 5000); // Change image every 2 seconds
}


var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");

  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}