CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?

<div class="out">
	<div class="imgs">
		<img  src="img/beatuy.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
		<img  src="img/child.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
		<img  src="img/girl.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
		<img  src="img/milk.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
		<img  src="img/cup.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
		<img  src="img/dog.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
		<img  src="img/beatuy.jpg"/ alt="CSS를 사용하여 원활한 캐러셀 전환을 달성하는 방법은 무엇입니까?" >
	</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
	}
}