CSSのみですごい簡単に動くスライドショーを実現しました。
現在は上下のみですが、これで簡単にスライドショーを実装することが出来そうです。

サンプルでは以下の画像のウサギたちが上下に遷移するように作成致しました。

• 
• 
• 

スライドショー

アニメーション説明

以下がアニメーションの設定を行っているところです。
ブラウザによってはアニメーションの設定方法が違うので2種類書いてあります。

/* スライドショーの画像位置、アニメーション設定 */
#slide li{
	position: relative;
	animation: slide 10s infinite;
	-webkit-animation: slide 10s infinite;
}
/* アニメーション設定 */
@-webkit-keyframes slide {
	0% { top: 0px; }
	50% { top: -400px; }
	100% { top: 0px; }
}
/* アニメーション設定 */
@keyframes slide {
	0% { top: 0px; }
	50% { top: -400px; }
	100% { top: 0px; }
}

#slide liで実行するアニメーションを指定、指定方法は以下の通り。

/* スライドショーの画像位置、アニメーション設定 */
#slide li{
	/* 指定アニメーション名（slide）, 実行時間(10秒), 実行回数 （無限）*/
	animation: slide 10s infinite;
	-webkit-animation: slide 10s infinite;
}

実行したアニメーションの中身

/* アニメーション設定 アニメーション名 */
@keyframes slide {
	/* 実行時間:0% top:0px */
	0% { top: 0px; }
	/* 実行時間:50% top:-400px */
	50% { top: -400px; }
	/* 実行時間:100% top:0px */
	100% { top: 0px; }
}

パーセント毎に指定して0%ならどうする、50%ならどうするといった具合にしてい今回は50%の時に最下部の画像を表示、100%時には元に戻るように0pxと指定しています。
これを更に細かく指定したりすると途中で加速したりいきなり他の画像に切り替えることも可能です。
画像の高さによってtopの-の値も変更しないと行けないので注意してください。

これで簡単にCSSのスライドショーの実現が出来ました。


«前の記事：FizzBuzz問題プログラマーのためのQ&Aサイト「Stack Overflow」：次の記事»