CSS实现轮播图动画步骤详解

<div class="carousel">
  <img src="image1.jpg" class="slide" alt="Slide 1">
  <img src="image2.jpg" class="slide" alt="Slide 2">
  <img src="image3.jpg" class="slide" alt="Slide 3">
</div>

.carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
<p>.slide {
width: 600px;
height: 400px;
position: absolute;
animation: slideAnimation 6s infinite;
}</p>

@keyframes slideAnimation {
  0%, 33.3%    { transform: translateX(0); }           /* 第一张 */
  33.3%, 66.6% { transform: translateX(-100%); }      /* 第二张 */
  66.6%, 100%  { transform: translateX(-200%); }      /* 第三张 */
}

.slide:nth-child(1) {
  animation-delay: 0s;
}
<p>.slide:nth-child(2) {
animation-delay: 2s;
}</p><p>.slide:nth-child(3) {
animation-delay: 4s;
}</p>

.slide {
  transition: transform 0.5s ease;
}

animation: slideAnimation 6s ease-in-out infinite;