左右同時にアニメーションさせる方法が分かりません

実現したいこと

画像をflexboxで横並び（スマホでは上下）にして、ul要素内liの画像を左側は上から下へ、右側は下から上へ同タイミングで徐々に表示していくアニメーションを実装したいです。

発生している問題・分からないこと

大まかなアニメーションの作成はできたのですが、どうしても左側の画像を表示した後に右側のアニメーションが開始されてしまいます。
codepenでコードを書きましたので、ご確認ください。

https://codepen.io/k_2024/pen/YPzVRwW

また、最終的な完成形は以下サイトのようなものを作成したいと思っています。
https://kiiro-d.com/

※2025/3/6 12:00 追記
codepenではうまく動いているように見えたのですが、ローカルで確認すると同タイミングになっていたなかったので、コードを追記しました。

また、完成形のように1枚目から2枚目を表示する際、間隔を空けずに表示したいのですが、
一瞬画像が消えてから次の画像が表示されてしまいます。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width">
6<meta http-equiv="X-UA-Compatible" content="chrome=1">
7<meta name="format-detection" content="telephone=no">
8<meta name="description" content="">
9<meta name="robots" content="index,follow">
10<link rel="canonical" href="">
11<title></title>
12<link type="text/css" rel="stylesheet" href="css/top.css" media="all">
13<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
14</head>
15
16<body id="page">
17
18<div class="pageWrap">
19	<div class="container">
20		<div class="page-content">
21			<div class="wrapper">
22				<div class="img-left">
23					<ul class="img-slide">
24						<li class="img-item">
25							<figure>
26								<img src="https://placehold.jp/d4d4d4/ffffff/1500x1100.png">
27							</figure>
28						</li>
29						<li class="img-item">
30							<figure>
31								<img src="https://placehold.jp/f1d5d5/ffffff/1500x1100.png">
32							</figure>
33						</li>
34					</ul>
35				</div>
36				<div class="img-right">
37					<ul class="img-slide">
38						<li class="img-item">
39							<figure>
40								<img src="https://placehold.jp/e0d5f1/ffffff/1500x1100.png">
41							</figure>
42						</li>
43						<li class="img-item">
44							<figure>
45								<img src="https://placehold.jp/d5e0f1/ffffff/1500x1100.png">
46							</figure>
47						</li>
48					</ul>
49				</div>
50			</div>
51		</div>
52	</div>
53</div>
54
55<script type="text/javascript" src="js/script.js" ></script>
56
57</body>
58</html>
59

css
1.wrapper {
2  display: flex;
3  flex-wrap: nowrap;
4}
5
6.img-left,
7.img-right {
8  width: 50%;
9  height: 100vh;
10  overflow: hidden;
11  position: relative;
12}
13
14.img-slide {
15  position: absolute;
16  width: 100%;
17  height: 100%;
18}
19
20.img-item {
21  position: absolute;
22  width: 100%;
23  height: 100vh;
24  opacity: 0;
25}
26
27.img-item img {
28  width: 100%;
29  height: 100%;
30  object-fit: cover;
31}
32
33/* 左側のアニメーション（上から下へ） */
34@keyframes anime_top_to_bottom {
35  0% {
36    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
37    opacity: 1;
38  }
39  100% {
40    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
41    opacity: 1;
42  }
43}
44
45/* 右側のアニメーション（下から上へ） */
46@keyframes anime_bottom_to_top {
47  0% {
48    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
49    opacity: 1;
50  }
51  100% {
52    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
53    opacity: 1;
54  }
55}
56
57/* アニメーションクラス */
58.animate-left {
59  animation: anime_top_to_bottom 2s ease-in-out forwards;
60}
61
62.animate-right {
63  animation: anime_bottom_to_top 2s ease-in-out forwards;
64}
65
66@media screen and (max-width: 959px){
67.wrapper {
68	display: flex;
69	flex-wrap: nowrap;
70	flex-direction: column;
71  }
72
73  .img-left,
74  .img-right {
75	width: 100%;
76	height: 50vh;
77  }
78
79  /* 左側のアニメーション（上から下へ） */
80  @keyframes anime_top_to_bottom {
81    0% {
82        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
83    }
84    100% {
85        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
86    }
87}
88  
89  /* 右側のアニメーション（下から上へ） */
90  @keyframes anime_bottom_to_top {
91	0% {
92		clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
93	}
94	100% {
95	  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
96	  opacity: 1;
97	}
98  }
99}
100
101

jQuery
1$(function(){
2	$(document).ready(function () {
3		function startAnimation(leftSelector, rightSelector) {
4		  let leftItems = $(leftSelector).find(".img-item");
5		  let rightItems = $(rightSelector).find(".img-item");
6		  let index = 0;
7		  let animationDuration = 2000; // アニメーション時間 (2秒)
8		  let intervalTime = 4000; // 画像切り替え間隔 (4秒)
9	  
10		  function animateNext() {
11			let nextIndex = (index + 1) % leftItems.length;
12	  
13			// すべての画像を非表示（アニメーションをリセット）
14			leftItems.css({ opacity: 0 }).removeClass("animate-left");
15			rightItems.css({ opacity: 0 }).removeClass("animate-right");
16	  
17			// **左右の画像を完全に同時に表示＆アニメーション**
18			leftItems.eq(nextIndex).css({ opacity: 1 }).addClass("animate-left");
19			rightItems.eq(nextIndex).css({ opacity: 1 }).addClass("animate-right");
20	  
21			index = nextIndex;
22		  }
23	  
24		  // 初回実行
25		  animateNext();
26	  
27		  // **左右のアニメーションを完全に同期**
28		  setInterval(animateNext, intervalTime);
29		}
30	  
31		// **左右のアニメーションを同時に開始**
32		startAnimation(".img-left", ".img-right");
33	  });
34});
35
36
37

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ChatGPTを使用しながら何度か改良をしたのですが、どうしても左側の画像を上から下へ表示しきってから右側のアニメーションが開始されてしまいます。

補足

特になし

TakaiY

2025/03/06 02:19

「codepenでコードを書きました」を表示してみると、たぶん意図どおり、左右同時にアニメーションしています。「左側の画像を表示した後に右側のアニメーションが開始されてしまいます」という状態ではありません。当方、 Chrome(Version 133.0.6943.142 (Official Build) (64-bit))、Firefox(135.0.1 (64-bit))で試しました。

non-non

2025/03/06 03:01

TakaiYさんご回答ありがとうございます。どうもローカルで見たときに発生しているようでしたので、質問内にもコードを追加しました。また、追記に記載しましたが、一瞬真っ白な画面が表示されてしまうという不具合も現在発生しています。

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

回答2件

ご提示のコードを試してみましたが、当方の環境では以下のように変更すると上手くいくようでした。

css
1.img-item {
2  position: absolute;
3  width: 100%;
4  height: 100vh;
5/*   opacity: 0; // 初期状態では非表示 */
6}

js
1let leftItems = $(leftSelector).find(".img-item figure");
2let rightItems = $(rightSelector).find(".img-item figure");

おそらく、.img-itemの高さが画像より大きいことが原因かと思いますので、その他、.wrapperの高さを変更するなどでも解決するのではないでしょうか。

投稿2025/03/06 03:26

編集2025/03/06 03:27

Lhankor_Mhy

総合スコア37338

non-non

2025/03/06 04:05

ご回答ありがとうございます。ご提示いただいたコードに修正したところ、意図したアニメーションに近づいてきました！一瞬画像が消えてから次の画像が表示されるのですが、完成形と同様に次の画像を表示する際、前の画像の上から表示させるにはopacityで表示を切り替える以外だと、どうすればいいのでしょうか。うまく説明ができず申し訳ございません。

Lhankor_Mhy

2025/03/06 06:32

position: absolute で重なっていますから、そのままopacityを0にしなければ画像が切り替わる形になるのではないでしょうか？　ただし、重ね順はz-indexでコントロールする必要があるかと思います。

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

ベストアンサー

回答に対するコメントより

一瞬画像が消えてから次の画像が表示されるのですが、完成形と同様に次の画像を表示する際、
前の画像の上から表示させるにはopacityで表示を切り替える以外だと、どうすればいいのでしょうか。

z-indexで前後を入れ替えればどうでしょう。
ただし、z-indexは同じレイヤーの要素同士(兄弟要素)で有効なので、アニメーションをかけるのは.img-item要素になります。

また、JSを使わなくてもCSSアニメーションをinfiniteで無限ループさせれば可能です。
animation-delayで開始時期をずれせば交互に入れ替わるようになります。

CSS
1.img-left .img-item {
2  animation: anime_top_to_bottom 6s ease-in-out infinite;  
3}
4.img-right .img-item {
5  animation: anime_bottom_to_top 6s ease-in-out infinite;  
6}
7.img-item:nth-child(1) {
8  animation-delay:  -3s;
9}
10.img-item img {
11  width: 100%;
12  height: 100vh;
13  object-fit: cover;
14}
15
16/* 左側のアニメーション（上から下へ） */
17@keyframes anime_top_to_bottom {
18  0% {
19    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
20    z-index: 2;
21  }
22  30% {
23    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
24    z-index: 2;
25  }
26  100% {
27    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
28    z-index: 0;
29  }
30}
31
32/* 右側のアニメーション（下から上へ） */
33@keyframes anime_bottom_to_top {
34  0% {
35    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
36   z-index: 2;
37  }
38  30% {
39    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
40  z-index: 2;
41  }
42  100% {
43  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
44  z-index: 0;
45  }
46}
47