左から右へループで画像を流したい

前提・実現したいこと

左から右へ流れるようにループで5個くらいの画像を実装したいです。
一応、ループはするのですが、途中から消えます。。。

解決方法を教えてくださる方いれば、ありがたいです。
よろしくお願いします。:)
こちら参考サイトです(メインビジュアルの下)
リンク内容

該当のソースコード

HTML
1      <section class="logo-section">
2    
3        <div class="logo-inner">
4            <div class="slider-inner">
5<div class="slider__item"><img id="logo_1" src="img/logo.png" alt="会社ロゴ"></div>
6<div class="slider__item"><img id="logo_1" src="img/logo.png" alt="会社ロゴ"></div>
7<div class="slider__item"><img id="logo_1" src="img/logo.png" alt="会社ロゴ"></div>
8<div class="slider__item"><img id="logo_1" src="img/logo.png" alt="会社ロゴ"></div>
9<div class="slider__item"><img id="logo_1" src="img/logo.png" alt="会社ロゴ"></div>
10    
11             </div>
12        </div>
13        
14    </section>
15

css
1html body main .logo-section {
2  height: 180px;
3  position: relative;
4  z-index: 1;
5  color: #F7F7F7;
6  overflow: hidden;
7}
8
9
10@-webkit-keyframes loop {
11  0% {
12    -webkit-transform: translateX(50%);
13            transform: translateX(50%);
14  }
15  to {
16    -webkit-transform: translateX(250%);
17            transform: translateX(250%);
18  }
19}
20
21@keyframes loop {
22  0% {
23    -webkit-transform: translateX(50%);
24            transform: translateX(50%);
25  }
26  to {
27    -webkit-transform: translateX(250%);
28            transform: translateX(250%);
29  }
30}
31
32@-webkit-keyframes loop2 {
33  0% {
34    -webkit-transform: translateX(-50%);
35            transform: translateX(-50%);
36  }
37  to {
38    -webkit-transform: translateX(150%);
39            transform: translateX(150%);
40  }
41}
42
43@keyframes loop2 {
44  0% {
45    -webkit-transform: translateX(-50%);
46            transform: translateX(-50%);
47  }
48  to {
49    -webkit-transform: translateX(150%);
50            transform: translateX(150%);
51  }
52}
53
54@-webkit-keyframes loop3 {
55  0% {
56    -webkit-transform: translateX(-150%);
57            transform: translateX(-150%);
58  }
59  to {
60    -webkit-transform: translateX(150%);
61            transform: translateX(150%);
62  }
63}
64
65@keyframes loop3 {
66  0% {
67    -webkit-transform: translateX(-150%);
68            transform: translateX(-150%);
69  }
70  to {
71    -webkit-transform: translateX(150%);
72            transform: translateX(150%);
73  }
74}
75
76html body main .logo-section .logo-inner {
77  display: -webkit-box;
78  display: -ms-flexbox;
79  display: flex;
80  height: 100%;
81  margin: 0 auto;
82  -webkit-box-pack: center;
83      -ms-flex-pack: center;
84          justify-content: center;
85  -webkit-box-align: center;
86      -ms-flex-align: center;
87          align-items: center;
88  overflow: hidden;
89  width: 100%;
90}
91
92html body main .logo-section .logo-inner .slider-inner:first-child {
93  -webkit-animation: loop 90s linear infinite;
94          animation: loop 90s linear infinite;
95}
96
97html body main .logo-section .logo-inner .slider-inner:nth-child(2) {
98  -webkit-animation: loop2 90s -60s linear infinite;
99          animation: loop2 90s -60s linear infinite;
100}
101
102html body main .logo-section .logo-inner .slider-inner:last-child {
103  -webkit-animation: loop3 90s -30s linear infinite;
104          animation: loop3 90s -30s linear infinite;
105}
106
107html body main .logo-section .logo-inner .slider-inner {
108  padding: 0;
109  display: -webkit-box;
110  display: -ms-flexbox;
111  display: flex;
112  width: 100%;
113}
114
115html body main .logo-section .logo-inner .slider-inner .slider__item {
116  display: -webkit-box;
117  display: -ms-flexbox;
118  display: flex;
119  -webkit-box-align: center;
120      -ms-flex-align: center;
121          align-items: center;
122}
123
124html body main .logo-section .logo-inner .slider-inner .slider__item img {
125  margin-right: 36px;
126  margin-left: 36px;
127}
128
129
130

試したこと

上記↑

yambejp

2021/03/18 05:54

とりあえず左ループ（？）で動作が確認できるソースを提示ください

K_3578

2021/03/18 05:58

右ループ　とは･･････？私が浅学なだけかも知りませんがそのような単語は聞いたことないです

codemanvs

2021/03/18 05:58

右ループで動かしたいのです。現在、右ループで一応動いているのが質問内容に記載のコードになります　!

codemanvs

2021/03/18 05:58

すみません、左から右へ流れるループですね。

K_3578

2021/03/18 06:02

＠質問者さんありがとうございます。自分の解釈が間違ってなければ左端から右端へ5つの画像が並んで流れていくループアニメーションを作りたいということでしょうか？

codemanvs

2021/03/18 06:05 編集

そうです！！こちらと同じようなものです。https://bonta-r.com/ 止まらずに流れるように。

K_3578

2021/03/18 06:22

＠質問者さんこちらは追記修正依頼の欄なので、他の方が見られる事を考えると質問者さんの想定される動きを確認出来るサイトのURLは質問文本文に追記した方が良いです。後、URLは「リンクの挿入」を押して出てくる型 [リンク先の内容](URL) に当てはめてください。

codemanvs

2021/03/18 06:27

かしこまりました！！

行動規範の内容に同意します

回答2件

下記でどうでしょう。logo-inner は画面幅の2倍以上になるように繰り返す。

html
1<main>
2    <section class="logo-section">
3        <div class="logo-inner">
4            <div class="slider-inner">
5                <div class="slider__item"><img id="logo_1" src="https://placehold.jp/250x180.png?text=logo1" alt="会社ロゴ">
6                </div>
7                <div class="slider__item"><img id="logo_2" src="https://placehold.jp/250x180.png?text=logo2" alt="会社ロゴ">
8                </div>
9                <div class="slider__item"><img id="logo_3" src="https://placehold.jp/250x180.png?text=logo3" alt="会社ロゴ">
10                </div>
11                <div class="slider__item"><img id="logo_4" src="https://placehold.jp/250x180.png?text=logo4" alt="会社ロゴ">
12                </div>
13                <div class="slider__item"><img id="logo_5" src="https://placehold.jp/250x180.png?text=logo5" alt="会社ロゴ">
14                </div>
15            </div>
16        </div>
17        <div class="logo-inner">
18            <div class="slider-inner">
19                <div class="slider__item"><img id="logo_1" src="https://placehold.jp/250x180.png?text=logo1" alt="会社ロゴ">
20                </div>
21                <div class="slider__item"><img id="logo_2" src="https://placehold.jp/250x180.png?text=logo2" alt="会社ロゴ">
22                </div>
23                <div class="slider__item"><img id="logo_3" src="https://placehold.jp/250x180.png?text=logo3" alt="会社ロゴ">
24                </div>
25                <div class="slider__item"><img id="logo_4" src="https://placehold.jp/250x180.png?text=logo4" alt="会社ロゴ">
26                </div>
27                <div class="slider__item"><img id="logo_5" src="https://placehold.jp/250x180.png?text=logo5" alt="会社ロゴ">
28                </div>
29            </div>
30        </div>
31    </section>
32</main>

css
1main .logo-section {
2  height: 180px;
3  position: relative;
4  z-index: 1;
5  color: #F7F7F7;
6  overflow: hidden;
7  display: flex;
8  width: 100%;
9}
10
11@keyframes loop {
12  0% {
13    transform: translateX(-100%);
14  }
15  to {
16    transform: translateX(0%);
17  }
18}
19
20main .logo-section .logo-inner {
21  animation: loop 30s linear infinite;
22}
23
24main .logo-section .logo-inner .slider-inner {
25  padding: 0;
26  display: flex;
27}
28
29main .logo-section .logo-inner .slider-inner .slider__item img {
30  margin-right: 36px;
31  margin-left: 36px;
32}