cssのみのスライダーで画像が一枚だけ表示されない

スライドの画像が一枚だけ表示されません

cssのみでのスライダーを作成してます。
5枚のスライダーのサンプルをコピペして6枚に変更しようとしてるのですが、6枚目の画像が表示されません。どこが間違ってますでしょうか？

cssコピペして使用するレベルのスキルです。

該当のソースコード

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><div id="slider">
<figure>
<img src="https://24.media.tumblr.com/61e1f6d73861cfad6e320c6d5dcecc6e/tumblr_mx3trrzUOJ1st5lhmo1_1280.jpg" alt="">
<img src="https://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg" alt="">
<img src="https://25.media.tumblr.com/d7c46e775fa6d6c613f10bceb2703b38/tumblr_mx3tqsqckF1st5lhmo1_1280.jpg" alt="">
<img src="https://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg" alt="">
<img src="https://25.media.tumblr.com/d7c46e775fa6d6c613f10bceb2703b38/tumblr_mx3tqsqckF1st5lhmo1_1280.jpg" alt="">
<img src="https://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg" alt="">
</figure>
</div>
</body>
</html>

該当のソースコード

@keyframes slidy {
0% { left: 0%; }
11% { left: 0%; }
    
16% { left: -120%; }
27% { left: -120%; }    
    
32% { left: -240%; }
43% { left: -240%; }
    
48% { left: -360%; }
61% { left: -360%; }
    
66% { left: -480%; }
81% { left: -480%; }
    
95% { left: -600%; }
100% { left: 0%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;hight:auto; float: left; }
div#slider figure { 
  position: relative;
  width: 600%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}

補足情報

https://www.webdesign-tch.org/html/419/
4. CSS slider full
のソースを使用