回答編集履歴
4
マークダウン記法の間違いを修正
test
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
z-indexで前後を入れ替えればどうでしょう。
|
|
6
6
|
ただし、z-indexは同じレイヤーの要素同士(兄弟要素)で有効なので、アニメーションをかけるのは`.img-item`要素になります。
|
|
7
7
|
|
|
8
|
-
また、JSを使わなくてもCSSアニメーションを`infinite
|
|
8
|
+
また、JSを使わなくてもCSSアニメーションを`infinite`で無限ループさせれば可能です。
|
|
9
9
|
animation-delayで開始時期をずれせば交互に入れ替わるようになります。
|
|
10
10
|
|
|
11
11
|
```CSS
|
3
コード微修正
test
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
}
|
|
21
21
|
.img-item img {
|
|
22
22
|
width: 100%;
|
|
23
|
-
height: 100
|
|
23
|
+
height: 100vh;
|
|
24
24
|
object-fit: cover;
|
|
25
25
|
}
|
|
26
26
|
|
2
修正
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
ただし、z-indexは同じレイヤーの要素同士(兄弟要素)で有効なので、アニメーションをかけるのは`.img-item`要素になります。
|
|
7
7
|
|
|
8
8
|
また、JSを使わなくてもCSSアニメーションを`infinite‘で無限ループさせれば可能です。
|
|
9
|
-
|
|
9
|
+
animation-delayで開始時期をずれせば交互に入れ替わるようになります。
|
|
10
10
|
|
|
11
11
|
```CSS
|
|
12
12
|
.img-left .img-item {
|
1
修正
test
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
回答に対するコメントより
|
|
2
2
|
> 一瞬画像が消えてから次の画像が表示されるのですが、完成形と同様に次の画像を表示する際、
|
|
3
3
|
> 前の画像の上から表示させるにはopacityで表示を切り替える以外だと、どうすればいいのでしょうか。
|
|
4
|
-
うまく説明ができず申し訳ございません。
|
|
5
4
|
|
|
6
5
|
z-indexで前後を入れ替えればどうでしょう。
|
|
7
6
|
ただし、z-indexは同じレイヤーの要素同士(兄弟要素)で有効なので、アニメーションをかけるのは`.img-item`要素になります。
|