css 로 무한 반복되는 이미지 만들기, css transition infinite loop

css 만으로 자연 스럽게 무한 반복되는 이미지 스크롤 입니다.

 

 

 

html

 

<div>

  <ul>

    <li class="item" style=" background-image: url(https://t1.daumcdn.net/cfile/tistory/994C47365B166C7303);"></li>

    <li class="item" style="background-image: url(https://t1.daumcdn.net/cfile/tistory/990C04505B166C7319);"></li>

    <li class="item" style="background-image: url(https://t1.daumcdn.net/cfile/tistory/994C47365B166C7303);"></li>

  </ul>  

</div>

 

 

https://prettycode.tistory.com

 

css

 

body {

    margin: 0 auto!important;

    background-color: #e9ecef;

    max-width: 414px;

}

div { 

  overflow: hidden;

}

ul {

  font-size:0px;

  min-height: 177px;

  white-space: nowrap;

  padding:0px;

}

.item {

  width:100%;

  overflow: hidden;

  display: inline-block;  

  height: 177px;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  

  -webkit-animation: moveSlideshow 5s linear infinite; 

  -moz-animation: moveSlideshow 5s linear infinite;

  -o-animation: moveSlideshow 5s linear infinite;

}

​

@keyframes moveSlideshow {

  100% { 

    transform: translateX(-200%);  

  }

}

​

 

 

https://prettycode.tistory.com