JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="start"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="end"></div>
	</div>

CSS

*{
	margin:0;
	padding:0;
}
body,html{
	width:100%;
	height:100%;
}

body{
	display:flex;
	align-items:center;
}

.wrapper {
	width:500px;
	height:300px;
	border:2px solid pink;
	margin:0 auto;
	text-align:center;
	overflow:hidden;
  padding:0 10px;
  /*

  
   
  float:left;
  oder font-size des parents auf "0" und inline-block auf children;
  
  */
  
  font-size:0;
  
}

.wrapper > div{
	width:50px;
	height:50px;
	display:inline-block;
	border-radius:50%;
	position:relative;
	background:radial-gradient(#fff 2%,red 20%,maroon 50%,#000);
  background-position:6px -4px;
  z-index:2;
  
  font-size:16px;
  margin:35% 0 0;
}

.wrapper > div:after{
	position:absolute;
	content:"";
	width:2px;
	height:1000px;
	background:maroon;
	bottom:50px;
	z-index:-12;
	/* falls größere width:  left:calc(50% - 3px); [50% minus (width/50%)] (hier Hälfte von 6px) */
  left:50%;
}

.start,.end{
	transform-origin:50% -230px;
}

.start{
	animation:erste 2s infinite;
}

.end{
	animation:letzte 2s infinite;
}

@keyframes erste{
	25%{
		transform:rotate(20deg);
	}
	50%{
		transform:rotate(0deg);
	}
	99.99999%{
		transform:rotate(0);
	}
}

@keyframes letzte{
	0%{
		transform:rotate(0deg);
	}
	25%{
		transform:rotate(0deg);
	}
	50%{
		transform:rotate(0deg);
	}
  75%{
		transform:rotate(-20deg);
	}
}