Vertical scrollbar is appearing while animating

Question

I am trying to animate the div, everything is fine except the unwanted vertical scroll bar is appearing. I did search for the solution but I only found body,html{overflow:hidden} this works but the problem is other elements are also hidden.Here's my code:-

.main-content {
  position: relative;
  height: 500px;
}

.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-container ul {
  list-style: none;
}
.box-container .box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: pink;
  border-radius: 50%;
  opacity: 0;
}

.animate1 {
  animation: animate .5s ease-in-out forwards;
}

.animate2 {
  animation: animate .5s ease-in-out .5s forwards;
}

.animate3 {
  animation: animate .5s ease-in-out 1.0s forwards;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(1000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
p {
  max-width: 80%;
  margin: 0 auto;
}

<div class="main-content">
    <div class="box-container">
      <ul class="list-unstyle list-inline">
          <li class="box animate1"></li>
          <li class="box animate2"></li>
          <li class="box animate3"></li>
      </ul>
    </div>
</div>
<div>
 <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

Instead of starting animate from 1000px, you can use calc(100vh - 250px), these valus are based on your given values.

Ball travels from bottom of the page, therefore no scroll bar because of it then

Example Snippet:

.main-content {
  position: relative;
  height: 500px;
}
.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-container ul {
  list-style: none;
}
.box-container .box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: pink;
  border-radius: 50%;
  opacity: 0;
}
.animate1 {
  animation: animate .5s ease-in-out forwards;
}
.animate2 {
  animation: animate .5s ease-in-out .5s forwards;
}
.animate3 {
  animation: animate .5s ease-in-out 1.0s forwards;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(calc(100vh - 250px));
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
p {
  max-width: 80%;
  margin: 0 auto;
}

<div class="main-content">
  <div class="box-container">
    <ul class="list-unstyle list-inline">
      <li class="box animate1"></li>
      <li class="box animate2"></li>
      <li class="box animate3"></li>
    </ul>
  </div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>