画像を横に無限ループしたい

javascript
1<link rel="stylesheet" href="https://tamesitamesi2.web.fc2.com/javasanple/CSS3.css">
2
3 <div class="gazou">
4   <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P1.PNG"><img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P2.PNG">
5   <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P3.PNG"><img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P4.PNG">
6</div>

CSS
1.gazou {
2  display:flex;
3    animation-name: loop;
4animation-duration: 20s;
5    animation-iteration-count: infinite;
6    animation-fill-mode: backwards;
7}
8@keyframes loop {
9  0% {
10    transform: translateX(0%);
11  }
12  to {
13    transform: translateX(-100%);
14  }
15}

上記のコードで試すと、画像が途中で途切れてしまい無限ループしません。
また横移動の途中で止まってしまい動きに違和感があります。

【やってみたこと】

javascript
1<link rel="stylesheet" href="https://tamesitamesi2.web.fc2.com/javasanple/CSS3.css">
2
3 <div class="gazou">
4   <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P1.PNG"><img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P2.PNG">
5   <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P3.PNG"><img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P4.PNG">
6</div>
7 <div class="gazou2">
8   <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P1.PNG"><img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P2.PNG">
9   <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P3.PNG"><img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P4.PNG">
10</div>

.gazou {
  display:flex;
    animation-name: loop;
animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

.gazou2 {
  display:flex;
    animation-name: loop2;
animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

@keyframes loop {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(-100);
  }
  to {
    transform: translateX(-200%);
  }

画像の列が２枚あり、動く一列目の後ろに２列目を流せばいいのでは？と思ったのですが、表示されるのは何故か一列目のみです。

ここからどうしたらいいのでしょうか？
アドバイスをお願いいたします

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

回答1件

ベストアンサー

html
1<div class="slider">
2    <div class="gazou">
3        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P1.PNG">
4        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P2.PNG">
5        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P3.PNG">
6        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P4.PNG">
7    </div>
8    <div class="gazou">
9        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P1.PNG">
10        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P2.PNG">
11        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P3.PNG">
12        <img src="https://tamesitamesi2.web.fc2.com/javasanple/ICON2_P4.PNG">
13    </div>
14</div>

css
1.slider{
2    display:flex;
3    width:100%;
4    overflow: hidden;
5}
6.gazou {
7    display:flex;
8    animation-name: loop;
9    animation-duration: 20s;
10    animation-iteration-count: infinite;
11    animation-fill-mode: backwards;
12    animation-timing-function: linear;
13}
14
15@keyframes loop {
16    0% {
17        transform: translateX(0%);
18    }
19    to {
20        transform: translateX(-100%);
21    }
22}