CSS로 흐르는 이미지 슬라이드 만들기

스크립트를 쓰지 않고 흐르는 이미지를 만들어보자.

예전에 슬라이드가 absolute와 left 값으로 그리고, append를 하면서
dom 구조부터 좌표까지 계속 바뀌어서 dom tree부터 layout paint composition 까지 계속 발생하여
시간이 지나고 버벅이는 현상이 생겨서 CSS로 변경해보고자 함

• 샘플 HTML

<div id="slider">
   <div class="image-box">
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <div><img src="https://unsplash.it/330/200/?random" /></div>
      <!--   clone     -->
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
      <div class="clone"><img src="https://unsplash.it/330/200/?random" /></div>
   </div>
</div>

• 샘플 CSS

#slider {
   overflow:hidden;
   position:relative;
   border:20px solid red;
   width:1440px;  // 이미지 보여지는 뷰 부분
   height:200px;
}
.image-box {
   width:5280px; // 원본+클론의 총 합
   height:100%;
   display:flex;
   flex-wrap:nowrap;
   animation: bannermove 5s linear infinite;
}
@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}

• #slider는 이미지가 보여질 부분이며, 사이즈는 줄어도 늘어도 무방

• .image-box는 슬라이드 이미지 + 슬라이드 이미지의 클론의 총 width

• animation이 이미지를 흐르게 한 뒤 애니메이션이 끝날때 쯤 translate를 하여 이미지가 자연스레 흐르게 보이도록 처리하였다.

샘플코드: 링크