きたけんブログ

旅と趣味と

CSSを使ったアニメーション2-スライドショー

2013/2/7

—

また久しく投稿してなかったorz

CSS3でスライドショーをやってみます。IE10以降、それ以外ならプレフィックス付きで動くはずです。

@keyframes anime1 {
	from	{ background-image:url(image1.jpg); }
	33.3%	{ background-image:url(image2.jpg); }
	66.6%	{ background-image:url(image3.jpg); }
	to	{ background-image:url(image1.jpg); }
}
.slideshow {
	background-image:url(image1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 640px;
	height: 480px;
	animation: anime1 20s infinite;
}

<div class="slideshow"></div>

方法としては、divの背景をアニメーションで入れ替えています。画像の透明度を変えてみたり、z-indexを入れ替えてみたり、色々と試してみましたが、一番これが楽です。コツは、キーフレームをスライドの枚数で分割し、最初と最後のフレームの画像を一致させること、アニメーションにease（初期値）を与えることです。

またアニメーションに対応していないブラウザ対策に、デフォルトの背景を設定しておいてもいいかも。

background-sizeでdivのサイズにフィットさせることが出来るため、スライドさせる画像のサイズをあまり意識しなくていい反面、divのサイズをどう設定するかが悩みどころ。今回は絶対値指定をしたけど、width-maxなんかで小さい画面に対応させるためには、一工夫が必要になります。画像だったら縦横比を自動で計算してくれるけど、divの縦横比はこっちが設定しないといけないですからね。解決策は、JavaScriptを駆使するか、設定したい縦横比の空画像をhiddenでdivの中に彫り込むか・・・。あんまりスマートじゃないですねー。

でもたった数行で実現できるのはありがたい。

最近、C++熱が冷めて、HTML+CSSに愛を感じるようになってきたｗ

CSS3