<div class="cp_cssslider01">
  <div class="cp_slidewrapper01">
    <div class="cp_slide01_item"><img src="img1.jpg"></div>
    <div class="cp_slide01_item"><img src="img2.jpg"></div>
    <div class="cp_slide01_item"><img src="img3.jpg"></div>
    <div class="cp_slide01_item"><img src="img4.jpg"></div>
    <div class="cp_slide01_item"><img src="img5.jpg"></div>
  </div>
</div>

/* slideの枠 */
.cp_cssslider01 {
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 1em auto;
  border: 10px solid #ffffff;
  box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
}
/* 画像のグループ */
.cp_slidewrapper01 {
  width: 500%;/* slideの枚数×100% */
  position: relative;
  display: flex;
  animation: cp_slider01 20s infinite ease;
}
/* 画像単体の設定 */
.cp_slide01_item {
  width: 300px;
  height: 200px;
}
@keyframes cp_slider01 {
  /* 100%を枚数で割った%に割り振る */
    0% { transform: translateX(0); }
   20% { transform: translateX(-300px); }
   40% { transform: translateX(-600px); }
   60% { transform: translateX(-900px); }
   80% { transform: translateX(-1200px); }
  100% { transform: translateX(0); }
}