анимация кнопок слайдера в цикле

HTML

<div class="container">
<div class="wrapper1">
	<div class="progress-bar__empty"></div>
	<div class="progress-bar__red"></div>
</div>

<div class="wrapper2">
	<div class="progress-bar__empty"></div>
	<div class="progress-bar__red2"></div>
</div>
</div>

CSS

.container {
	width: 700px;
	height: 200px;
	border: 1px solid black;
	background-color: black;
	margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
	
}

.wrapper1 {
	 overflow:hidden; 
	width: 100px;
	height: 3px;
	padding-right: 10px;
	float: left;
	margin-right: 10px;
	margin-left: 100px;
}
.progress-bar__empty {
	width: 110px;
	height: 3px;
	margin-left:auto;
	margin-right:auto; 
	background-color: white;
	position: relative;
	z-index: 1;
}

.progress-bar__red {
	width: 100px;
	height: 3px;
	margin-left:auto;
	margin-right:auto; 
	background-color: red;
	position: relative;
	z-index: 2;
	top:-3px;
	left: -100px;
	animation: red 15s linear infinite;
}
.wrapper2 {
	 overflow:hidden; 
	width: 100px;
	height: 3px;
	margin-right: 10px;
	float: left;
}
.progress-bar__empty {
	width: 110px;
	height: 3px;
	margin-left:auto;
	margin-right:auto; 
	background-color: white;
	position: relative;
	z-index: 1;
}

.progress-bar__red2 {
	width: 100px;
	height: 3px;
	margin-left:auto;
	margin-right:auto; 
	background-color: red;
	position: relative;
	z-index: 2;
	top:-3px;
	left: -100px;
	animation: red2 15s linear infinite;
	
} 

   @keyframes red {
    0% { left: -100px; }
    50% { left: 110px; }
    100% { left: 110px; }
} 
   
	@keyframes red2 {
    0% { left: -100px; }
    50% { left: -100px; }
    100% { left: 100px; }
}