怎样用css实现无缝轮播图切换？

<div class="out">
	<div class="imgs">
		<img src="img/beatuy.jpg"/>
		<img src="img/child.jpg"/>
		<img src="img/girl.jpg"/>
		<img src="img/milk.jpg"/>
		<img src="img/cup.jpg"/>
		<img src="img/dog.jpg"/>
		<img src="img/beatuy.jpg"/>
	</div>
</div>

.out{
	width: 200px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

.imgs {
	width: 1400px;
	height: 100px;
	position: absolute;
	animation: ppt 10s linear infinite;
}

img {
	float: left;
	width: 200px;
	height: 100px;
}

@keyframes ppt {
	0% {
		left: 0px
	}
	20% {
		left: -250px
	}
	40% {
		left: -500px
	}
	60% {
		left: -750px
	}
	80% {
		left: -1000px
	}
	100% {
		left: -1200px
	}
}

.out:hover .imgs{
   animation-play-state:paused;
}