this is my js

var eles = Array.prototype.slice.call(document.querySelectorAll(".animated"));
document.addEventListener("scroll", animatedFadeInUp);
animatedFadeInUp();

function animatedFadeInUp() {
  eles = eles.filter(function(ele) {
    var rect = getRect(ele);
    if (rect.isVisible) {
      ele.classList.add("slideUp");
      return false;
    }
    return true;
  });
  if (eles.length <= 0) document.removeEventListener("scroll", animatedFadeInUp);
}

function getRect(ele) {
  var inHeight = window.innerHeight;
  var rect = ele.getBoundingClientRect();
  rect.isVisible = rect.top - inHeight < 0;
  // rect.isBottom = rect.bottom - inHeight <= 0;
  return rect;
}

@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

if the object does not have a location (position), it will not be affected
, but if it has a location, it will move to a very strange angle first, and then it will change back to its proper position

because my actions have transform,
I also use transform 50% when I locate
like:

position: absolute;
left:50%;
top:300px;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);

so how can I make him the right place in the first place? Even if slideUp ? Will not first go to a very strange position, and then return to my original location after the end of the exercise?