vue枠内でCSSのみで画像をループさせたい

前提・実現したいこと

現在、vue.jsにてポートフォリオを作成中なのですが、以下CSSのみで画像をループさせる方法を模索中です。

画像をそれぞれ下から上に流れるようにまではできたのですが、こちらをループさせたいです。
いろんな記事を参考にして試してみましたが上手く実装されません。。。

分かる方いらっしゃいましたがお力添えをいただきたいです。

よろしくお願いいたします。

該当のソースコード

html
1<div class="main">
2    <div class="main-tll flex">
3      <h1>サンプル</h1>
4      <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
5      <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
6      <a href class="btn btn-orange">ボタン</a>
7    </div>
8    <ul class="main-roop">
9      <li class="main-roop-items">
10        <img src="../assets/xxxx.jpg" alt />
11      </li>
12      <li class="main-roop-items">
13        <img src="../assets/xxxx.jpg" alt />
14      </li>
15      <li class="main-roop-items">
16        <img src="../assets/xxxx.jpg" alt />
17      </li>
18      <li class="main-roop-items">
19        <img src="../assets/xxxx.jpg" alt />
20      </li>
21    </ul>
22    <ul class="main-roop">
23      <li class="main-roop-items">
24        <img src="../assets/xxxx.jpg" alt />
25      </li>
26      <li class="main-roop-items">
27        <img src="../assets/xxxx.jpg" alt />
28      </li>
29      <li class="main-roop-items">
30        <img src="../assets/xxxx.jpg" alt />
31      </li>
32      <li class="main-roop-items">
33        <img src="../assets/xxxx.jpg" alt />
34      </li>
35    </ul>
36    <ul class="main-roop">
37      <li class="main-roop-items">
38        <img src="../assets/xxxx.jpg" alt />
39      </li>
40      <li class="main-roop-items">
41        <img src="../assets/xxxx.jpg" alt />
42      </li>
43      <li class="main-roop-items">
44        <<img src="../assets/xxxx.jpg" alt />
45      </li>
46      <li class="main-roop-items">
47        <img src="../assets/xxxx.jpg" alt />
48      </li>
49    </ul>
50  </div>

css
1html,
2body {
3  overflow: hidden;
4}
5
6.main {
7  width: 100%;
8  height: 100vh;
9  background-color: rgba(0, 0, 0, 0.575);
10  position: relative;
11  &-tll {
12    display: flex;
13    align-items: center;
14    justify-content: center;
15    flex-direction: column;
16    z-index: 1;
17    font-weight: bold;
18    color: gray;
19    background-color: aliceblue;
20    border-radius: 2rem;
21    position: absolute;
22    top: 40%;
23    left: 10%;
24    padding: 2rem;
25    box-shadow: 0 0 10px lightgrey;
26    width: 80%;
27  }
28  .btn-orange,
29  a.btn-orange {
30    color: #fff;
31    background-color: #eb6100;
32    padding: 10px;
33    margin-top: 1rem;
34    border-radius: 1rem;
35    text-decoration: none;
36  }
37  .btn-orange:hover,
38  a.btn-orange:hover {
39    color: #fff;
40    background: #f56500;
41  }
42  &-roop {
43    width: 100%;
44    height: 68vh;
45    display: flex;
46    opacity: 0.6;
47    &-items {
48      animation: loop 50s -25s linear infinite;
49      backface-visibility: hidden;
50      will-change: transform;
51      width: 100%;
52      overflow: hidden;
53    }
54  }
55}
56
57img {
58  width: 350px;
59  height: 480px;
60}
61
62@keyframes loop {
63  0% {
64    transform: translateY(100%);
65  }
66  to {
67    transform: translateY(-100%);
68  }
69}

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

回答1件

ベストアンサー

下記にしたらどうでしょうか。

css
1@keyframes loop {
2  0% {
3    transform: translateY(0%); /* 修正 */
4  }
5  to {
6    transform: translateY(-100%);
7  }
8}

ご希望のことは下記のサンプルのような感じでしょうか。

投稿2021/03/22 05:13

総合スコア34073

2021/03/22 05:23

ループはし続けましたが、最後の画像が回ってくる前に、１枚目の画像へ切り替わってスムーズなループとは言えない感じですね。。

hatena19

2021/03/22 07:55

回答にCodePenのサンプルを追加しましたので、ご参照ください。

TMTN

2021/03/22 08:26

まさにサンプルのような感じを想定しておりました。しかし、画像の大きさが原因なのか私の方で実装してみたら一番最後と最初の切り替わる際にスムーズに切り替わらず、最初の画像に飛ぶ感じになってしまします。。

hatena19

2021/03/22 08:39

ポイントは、HTMLの方で同じ画像を2回繰り返すということとですね。 CSSだけだとそうしないと、途切れずにループさせるのは難しいです。元のコードだと main-roop が3個ありますが、それをコピーして後ろに挿入します。で元が3個なので、translateY(-300%); にすると途切れずにループします。あと、画像imgは下記でliブロック一杯に広がるようにしてます。 width: 100%; height: 100%; object-fit: cover;

TMTN

2021/03/22 08:44

まさにサンプルのようなループを実装したかったです。しかし、自身の方でいただいたサンプルを参考に記述してみましたが、最初の行と最後の行が滑らかに切り替わらず、一番最後の行画像が過ぎた途端、一番最初にサッと切り替わってしまい、サンプルのような滑らかな切り替わりができない状況です。。

TMTN

2021/03/22 09:06

上記回答を確認する前に送ってしまいました。。確認後、試してみると上手く実装する事ができました。本当に助かりました。ありがとうございます。

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