先放codepen原code:
https://codepen.io/dudleystorey/pen/kBrWvm

以下為我自己寫的部分

html的部份

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>    <---------超過4張圖片排版有出現問題
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>

css的部份

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  top: 100px;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}
#slider{
  height: 500px;
  width: 500px;
  left: 500px;   <----  改成margin-left 
}

為何left在slider底下都不起作用，只能用margin-left，
但這屬性不是我想要的， 請問如何改寫成left 並且能夠發揮他的作用?

題外話: 如何在增加圖片時不會亂掉排版? 是修改哪一行才能與圖片數目呈正相關?