<style type="text/css">
div.ani {
  background-color: white;
  width: 180px;
  overflow-y: hidden;
  overflow-x: hidden;
  border: 1px solid;
  margin: 10px;
}

ul.ani {
  width: calc(185px * 10);
  padding: 0px;
  margin: 0px;
  background-color: white;
}

ul.ani li {
  display: inline-block;
  margin: 10px;
  padding: 0px;
  width: 155px;
}

ul.ani {
  animation-duration: 60s;
  animation-name: slide;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes slide {
	0%    {margin-left: 15px;}
	5%    {margin-left: -165px;}
	10%   {margin-left: -350px;}
	15%   {margin-left: -525px;}
	20%   {margin-left: -705px;}
	25%   {margin-left: -885px;}
	30%   {margin-left: -1065px;}
	35%   {margin-left: -1245px;}
	40%   {margin-left: -1425px;}
	45%   {margin-left: -1605px;}

	50%   {margin-left: -1605px;}

	55%   {margin-left: -1425px;}
	60%   {margin-left: -1245px;}
	65%   {margin-left: -1065px;}
	70%   {margin-left: -885px;}
	75%   {margin-left: -705px;}
	80%   {margin-left: -525px;}
	85%   {margin-left: -350px;}
	90%   {margin-left: -165px;}
	95%   {margin-left: 15px;}
	100%   {margin-left: 15px;}
}
</style>


<div class="ani">
<div style="width: 2100px;">

<ul class="ani">
  <li><img src="http://jisblee.me/assets/images/1.png" /></li>
  <li><img src="http://jisblee.me/assets/images/2.png" /></li>
  <li><img src="http://jisblee.me/assets/images/3.png" /></li>
  <li><img src="http://jisblee.me/assets/images/4.png" /></li>
  <li><img src="http://jisblee.me/assets/images/5.png" /></li>
  <li><img src="http://jisblee.me/assets/images/6.png" /></li>
  <li><img src="http://jisblee.me/assets/images/7.png" /></li>
  <li><img src="http://jisblee.me/assets/images/8.png" /></li>
  <li><img src="http://jisblee.me/assets/images/9.png" /></li>
  <li><img src="http://jisblee.me/assets/images/10.png" /></li>
</ul>

</div>
</div>