<div id="css-slider">
  <div class="slider-wrapper">
    <div class="slide-item">1</div>
    <div class="slide-item">2</div>
    <div class="slide-item">3</div>
  </div>
</div>
#css-slider { 
  width: 300px; 
  height: 200px; 
  overflow: hidden; 
  background: #666;
} 
.slide-item { 
  width: 300px; 
  height: 200px; 
  float: left; 
  position: relative; 
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
} 
.slider-wrapper { 
  width: 300%; 
  position: relative; 
  left: 0; 
  will-change: transform; 
  animation: slider 10s infinite; 
} 
@keyframes slider { 
  0% { transform: translateX(0); } 
  33% { transform: translateX(-300px); } 
  66% { transform: translateX(-600px); } 
  100% { transform: translateX(0); } 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.