HTML・cssのアニメーションで背景画像が表示されない

実装したいこと

PCやスマホで作成したHTMLファイルを開いたとき、2枚の背景画像がフェードで交互に表示される実装をしたいです。
ウェブ上のサイトを参考にコーディングしましたが、現状2枚の画像ファイルそのものが表示されないため改善点を教えて頂きたいです。

以下のコードでは2枚の画像をそれぞれ2秒ずつ、計4秒を無限ループさせる仕様を目指しています。
画像の相対パスが正しいことは確認できています。

コード

HTML
1<body>
2    <div class="IMAGE">
3        <div class="img1"></div>
4        <div class="img2"></div>
5    </div>
6</body>

css
1@charset "utf-8";
2
3.IMAGE {
4    height: 100vh;
5}
6
7.img1, .img2 {
8    background-size: contain;
9    position: absolute;
10    background-position: center center;
11    background-repeat: no-repeat;
12    animation: anime 4s infinite;
13    opacity: 0;
14}
15
16.img1 {
17    background-image: url(../2arrows_right.png);
18}
19
20.img2 {
21    background-image: url(../2arrows_Left.png);
22    animation-delay: 2s;
23}
24
25@keyframes anime {
26    0% {
27            opacity: 0;
28    }
29    37.5% {
30            opacity: 1;
31    }
32    50% {
33            opacity: 1;
34    }
35    63.5% {
36            opacity: 0;
37    }
38    100%{
39            opacity: 0;
40    }
41}

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

回答2件

ベストアンサー

高さと幅を設定する必要があります。

css
1.img1,
2.img2 {
3  background-size: contain;
4  height: 100%;  /* 追加 */
5  width: 100%;  /* 追加 */
6  position: absolute;
7  background-position: center center;
8  background-repeat: no-repeat;
9  animation: anime 4s infinite;
10  opacity: 0;
11}

別案

今なら、gridで重ねて配置してもいいですね。

css
1.IMAGE {
2  height: 100vh;
3  display: grid;  /* 追加 */
4}
5
6.img1,
7.img2 {
8  grid-area: 1 / 1 / 2 / 2;  /* 追加 */
9  background-size: contain;
10  background-position: center center;
11  background-repeat: no-repeat;
12  animation: anime 4s infinite;
13  opacity: 0;
14}

投稿2022/12/25 02:36

編集2022/12/25 02:46

hatena19

総合スコア33715

Hinomae

2022/12/25 03:58

ご解答ありがとうございます！ widthとheightを指定したところ正常に表示されました。つかぬことを伺いますが、基本的に全てのdivタグはcssで幅や高さを指定する必要がある、という解釈で良いのでしょうか？？

hatena19

2022/12/25 04:21

divは、通常、サイズ指定しない場合、幅は親要素の幅まで広がり、高さは中身の要素の高さになります。ただし、position: absolute; にすると、フローから浮いた状態になるので、中身のサイズになります。中身がないときは、幅も高さも0になります。

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

div自体に高さがないからではないでしょうか？
（height: 0の状態なので、何も表示されない）

修正例

css
1.img1, .img2 {
2    height: 100%; /* 追加 */
3    background-size: contain;
4    position: absolute;
5    background-position: center center;
6    background-repeat: no-repeat;
7    animation: anime 4s infinite;
8    opacity: 0;
9}