HTMLとCSSで2枚の画像をゆっくりと切り替え表示する

　javaを使って2枚の画像をゆっくりと切り替え表示するコードは見かけるが、HTMLとCSSだけで複数画像を切り替え表示するコードがなかなか見つからない。

　あってもよくわからない。

　が、何とか表示できたので、メモ＆皆様にご披露。

表示する画像
HTMLの記載
CSSの記載
出来上がった画像アニメーションと参照サイト

表示する画像

　表示する画像は↓の2枚

Kプロフィール用2

URLは「https://wordpress.0hs.org/wp-content/uploads/2025/05/92c993bc9bb035b44e214a89e2ee5bfc.png」

シマエナガのとりさん

URLは「https://wordpress.0hs.org/wp-content/uploads/2024/04/ce33f47bc6515118d8286f61c8332edc.png」

HTMLの記載

　基本のHTML

<div class="album">
<img class="img1" src="1枚目の画像のURL" alt="画像の説明">
<img class="img2" src="2枚目の画像のURL" alt="画像の説明">
</div>

　見本の画像を入れた記載は↓

<div class="album">
<img class="img1" src="https://wordpress.0hs.org/wp-content/uploads/2025/05/92c993bc9bb035b44e214a89e2ee5bfc.png" alt="K">
<img class="img2" src="https://wordpress.0hs.org/wp-content/uploads/2024/04/ce33f47bc6515118d8286f61c8332edc.png" alt="シイ">
</div>

CSSの記載

　CSSの記載は

.album {
margin: auto;
background-color: white;
position: relative;
}
.album img {
width: 50%;
animation-name: album;
-webkit-animation-name: album;
animation-duration: 10s;
-webkit-animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
opacity: 0;
}
.album .img1 {
display: block;
margin: 0 auto;
}
.album .img2 {
animation-delay:5s;
-webkit-animation-delay:5s;
position: absolute;
top: 0;
left: 25%;
}
@keyframes album {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
37.5% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@-webkit-keyframes album {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
37.5% {
opacity: 1;
}
50% {
opacity: 0;
}
}

・画像が2つなのでアニメーション1周を100%とすると各画像を表示する時間は50%ずつ。
　画像が4つなら25%。

・時間内でopacityを使って表示・非表示を切り替える。
徐々に浮き出て徐々に消える感じするため12.5%と37.5%も指定。
　非表示で開始して徐々に浮き出る→12.5%時点から37.5%時点は完全に見えてる状態が続く→徐々に消えて50%時点でまた非表示。

・〔animation-name〕はキーフレームでつけた名前。

・〔animation-duration:10s〕アニメーション1周を10秒間とする。

・〔animation-iteration-count:infinite〕無限に繰り返す。

・〔opacity:0〕待機してる間に表示されるのを防ぐための記載。

・〔animation-delay〕2つ目以降の画像のアニメーション開始をずらす。
　今回は1周10秒間に2つの画像を表示するから2つ目を5秒遅れてスタートさせる。
　3つ目4つ目があれば同じ間隔でずらしてく。

・複数ブラウザに対応する場合、対応したいベンダープレフィックスも用意する。
　animation-name、animation-duration、animation-iteration-count、animation-delayは頭につける。
　例）-webkit-animation-name、-webkit-animation-duration。
　@keyframesだけ@の後ろなのに注意。
　@-webkit-keyframesになる。