[CSS] 画像がフェードインするスライドショーをCSSだけで作る

[CSS] 画像がフェードインするスライドショーをCSSだけで作る公開日:2019/09/06 更新日:2020/03/01

CSSのアニメーション機能を使えば、CSSだけで画像をふわっとフェードイン、フェードアウトさせたスライドショーが実装できます
プラグインのインクルードも不要で動作も軽快なので、ちょっとした場面で活用できます

サンプルコード

html <ul class="slider_fade"> <li><img src="./images/slider_01.jpg"></li> <li><img src="./images/slider_02.jpg"></li> <li><img src="./images/slider_03.jpg"></li> </ul> クリップボードにコピー CSS .slider_fade { position: relative; } .slider_fade > li { position: absolute; list-style: none; visibility: hidden; animation: anime_slider_fade 12s 0s infinite; } .slider_fade > li:nth-of-type(2) { animation-delay: 4s; } .slider_fade > li:nth-of-type(3) { animation-delay: 8s; } @keyframes anime_slider_fade { 0% { visibility: visible; opacity: 0; } 15% { opacity: 1; } 33.3% { opacity: 1; } 48.3% { opacity: 0; } 100% { opacity: 0; } }クリップボードにコピー

ソースコードの解説

スライドする画像の枚数によって、「anime_slider_fade」のパーセント配分を調整する必要があります
サンプルコードでは3枚の画像をスライドしているため、100%を三等分した33.3%を区切りとしています
0%から15%の間にopacityで透過率を上げてふわっと表示、区切りとなる33.3%から48.3%の間に透過率を下げてふわっと消しています
2枚目の画像は、animation-delayで指定された時間差によって、1枚目の画像が消え始めた頃に表示し始めるという動きになります

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

お問い合わせ

📎📎📎📎📎📎📎📎📎📎