Что влияет на плавность хода шариков?

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 450px;
  height: 650px;
  position: relative;
  margin-top: 5px;
  box-shadow: 10px 10px 5px grey;
  overflow: hidden;
}

.brick {
  color: white;
  text-align: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  box-shadow: 10px 10px 5px grey;
  position: absolute;
  background: radial-gradient( circle at 30% 30%, rgba(255, 255, 255, 1), rgba(120, 120, 120, 1));
}

.brick1 {
  top: 150px;
  left: 60px;
}

.brick2 {
  top: 250px;
  left: 120px;
}

.brick3 {
  top: 350px;
  left: 180px;
}

.brick4 {
  top: 450px;
  left: 240px;
}

.brick5 {
  top: 550px;
  left: 300px;
}

.ball1 {
  background: radial-gradient(circle at 30% 30%, white, red);
  animation: bounce 12s ease-in-out infinite;
}

.ball2 {
  background: radial-gradient(circle at 30% 30%, white, orange);
  animation: bounce 12s ease-in-out 1.5s infinite;
}

.ball3 {
  background: radial-gradient(circle at 30% 30%, white, saddlebrown);
  animation: bounce 12s ease-in-out 3.3s infinite;
}

.ball4 {
  background: radial-gradient(circle at 30% 30%, white, green);
  animation: bounce 12s ease-in-out 5.1s infinite;
}

.ball5 {
  background: radial-gradient(circle at 30% 30%, white, cyan);
  animation: bounce 12s ease-in-out 8.4s infinite;
}

.ball6 {
  background: radial-gradient(circle at 30% 30%, white, darkmagenta);
  animation: bounce 12s ease-in-out 10.8s infinite;
}

.ball7 {
  background: radial-gradient(circle at 30% 30%, white, dodgerblue);
  animation: bounce 12s ease-in-out 13.5s infinite;
}

.ball8 {
  background: radial-gradient(circle at 30% 30%, white, blue);
  animation: bounce 12s ease-in-out 15.8s infinite;
}

@keyframes bounce {
  from,
  to {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    box-shadow: 12px 12px 2px 1px #bbb;
  }
  from {
    transform: translate(58px, 0);
  }
  4% {
    transform: translate(70px, 120px);
  }
  9% {
    transform: translate(90px, 110px);
  }
  13% {
    transform: translate(125px, 220px);
  }
  18% {
    transform: translate(160px, 180px);
  }
  22% {
    transform: translate(185px, 320px);
  }
  27% {
    transform: translate(220px, 280px);
  }
  31% {
    transform: translate(245px, 420px);
  }
  36% {
    transform: translate(290px, 380px);
  }
  40% {
    transform: translate(300px, 520px);
  }
  45% {
    transform: translate(340px, 480px);
  }
  49% {
    transform: translate(360px, 620px);
  }
  54% {
    transform: translate(420px, 580px);
  }
  58% {
    transform: translate(360px, 620px);
  }
  63% {
    transform: translate(308px, 593px);
  }
  67% {
    transform: translate(245px, 620px);
  }
  72% {
    transform: translate(185px, 612px);
  }
  76% {
    transform: translate(125px, 620px);
  }
  81% {
    transform: translate(65px, 615px);
  }
  85% {
    transform: translate(30px, 620px);
  }
  89% {
    transform: translate(5px, 618px);
  }
  94% {
    transform: translate(0, 620px);
  }
  to {
    transform: translate(-5px, 620px);
  }
}

<div class="container">
  <div class="ball1"></div>
  <div class="ball2"></div>
  <div class="ball3"></div>
  <div class="ball4"></div>
  <div class="ball5"></div>
  <div class="ball6"></div>
  <div class="ball7"></div>
  <div class="ball8"></div>

  <div class="brick brick1"></div>
  <div class="brick brick2"></div>
  <div class="brick brick3"></div>
  <div class="brick brick4"></div>
  <div class="brick brick5"></div>
</div>