[css]CSSだけで超簡易的なスライドショー作成

スライドはしない。タイトル詐欺だけど他にあれ系をなんて呼べばいいかがわかんない。

仕組み

position:absolute;とかで画像を重ねて、keyframeでopacityをいじって時間経過で下の画像が透けて見えるようにする。
切り替わりはユーザー側のアクションに依存しないのでコンテンツの背景とか挿絵とか、添え物的な扱いに留めるのがいい。

HTML

<ul>
	<li>
		<div class="img"><img src="aaa.jpg" alt=""></div>
		<div class="img"><img src="bbb.jpg" alt=""></div>
	</li>
	<li>
		<div class="img"><img src="aaa.jpg" alt=""></div>
		<div class="img"><img src="bbb.jpg" alt=""></div>
	</li>
</ul>

こんなかんじで、画像を直接入れるよりも一つ噛ませておいたほうが安心。

CSS

@keyframes imgfade{
	0%{ opacity: 0;}
	45%{ opacity: 0;}
	50%{ opacity: 1;}
	95%{ opacity: 1;}
	100%{ opacity: 0;}
}

ul li{
	position: relative;
}
ul li .img{
	position: absolute;
	top: 0;
	left: 0;
}
ul li .img + .img{
	animation-duration: 20s;
	animation-name: imgfade;
	animation-iteration-count: infinite;
}

端的に書くとこうなる。
2枚を重ねて上に来てる画像の不透明度が時間差で変わる。

keyframe一つだと2枚組しか対応できない。枚数を増やしたい場合はkeyframeを追加して時間差の調整も必要になる。ということで柔軟さに掛けるから、汎用性は求められない。

わざわざjsで組んだりライブラリ突っ込むほどではないよな、程度のボリュームのときに使えるかもねって程度。