newton's cradle (wip)

HTML

<div class="frame">
  <div class="balls">
    <div class="ball b1"></div>
    <div class="ball s3"></div>
    <div class="ball b3"></div>
    <div class="ball b4"></div>
    <div class="ball b2"></div>
  </div>
</div>

CSS

.frame {
  height: 175px;
  width: 300px;
  border: 5px solid #555;
  border-bottom-width: 0px; 
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
.balls {
  position: relative;
  position: relative;
  top: 100px;
  margin: 0 25px;
}
.ball {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: radial-gradient(#ddd,#999);
  display: inline-block;
  margin: -2px;
}
.ball::before {
  content: '';
  display: inline-block;
  height: 102px;
  width: 2px;
  background: #222;
  position: relative;
  left: 25px;
  top: -102px;
}
.b1 {
  transform-origin: top;
  transform: translateX(0px) translateY(0px);
  animation: leftBall 2s;
  animation-delay: 2s;
}

.b2 {
  transform-origin: top;
  transform: translateX(0px) translateY(0px);
  animation-delay: 2s ease-in infinite;
  animation: leftString 2s ease-in infinite;
  //animation-delay: 2s ease-in infinite;
}
.b2::before {
  transform-origin: top;
  transform: rotate(0deg) translateY(0px);
  animation-delay: 2s;
  //animation: leftString 5s ease-in infinite;
}


@keyframes leftBall {
  {
    transform: translateX(-50px) translateY(-15px) rotate(45deg);
  }
}

@keyframes leftString {
  50% {
    transform: translateY(-15px) translateX(50px) rotate(-45deg);
    animation-delay: 2s;
  }
}