SCRIPT無しでCSS3のみでアニメーション動作を実装させるサンプル。
今回は自動でスライド(スクロール)する画像ギャラリーの紹介。

初めに完成サンプルから。
※動作環境はWebkitブラウザのSafariやChromeのみです!

CSS3 AUTO SLIDE GALLERY

メイン画像と併せて、下位置にサムネイル画像を並べて、
オートスタート形式で順々に画像がスライドします。

現在表示している画像のサムネイルは、
透過度が100%になり、通常サイズよりも1.2倍の大きさに拡大し、
ドロップシャドウ(白)が付けます。
※画像ではなくCSS3でのドロップシャドウ。

全体構成について、まずはHTMLソースから。
メイン画像とサムネイル画像は別々のリストで形成しています。

◆HTML
<div id="slidewrap">
<div id="slidemask">
<ul id="photo">
<li id="slide01"><img src="img/photo01.jpg" width="500" height="375" alt=""><span>【PHOTO-01】</span></li>
<li id="slide02"><img src="img/photo02.jpg" width="500" height="375" alt=""><span>【PHOTO-02】</span></li>
<li id="slide03"><img src="img/photo03.jpg" width="500" height="375" alt=""><span>【PHOTO-03】</span></li>
<li id="slide04"><img src="img/photo04.jpg" width="500" height="375" alt=""><span>【PHOTO-04】</span></li>
</ul>
</div><!--/#slidemask-->
<ul id="thumb">
<li id="thumb01"><a href="#"><img src="img/photo01.jpg" width="125" height="94" alt=""></a></li>
<li id="thumb02"><a href="#"><img src="img/photo02.jpg" width="125" height="94" alt=""></a></li>
<li id="thumb03"><a href="#"><img src="img/photo03.jpg" width="125" height="94" alt=""></a></li>
<li id="thumb04"><a href="#"><img src="img/photo04.jpg" width="125" height="94" alt=""></a></li>
</ul>
</div><!--/#slidewrap-->

・メイン画像用リスト<ul id=”photo”>
・サムネイル画像用リスト<ul id=”thumb”>

この2つのリストに対して、メイン画像用リストのみを囲う<div id=”slidemask”>と
メイン画像とサムネイル画像全てのリストを囲う<div id=”slidewrap”>の2つ用意しています。

そしてこれらをCSS3を使って動かします。

◆CSS
/* SlideArea
-------------------------- */
#slidewrap {
	margin: 0 auto;
	padding: 20px 20px;
	width: 500px;
	text-align: left;
	background: #333;
}
#slidewrap ul li {
	list-style: none;
}

#slidemask {
	width: 500px;
	height: 375px;
	overflow: hidden;
	position: relative;
}


/* PhotoSlideArea
-------------------------- */
ul#photo {
	top: 0;
	left: 0;
	width: 2000px;
	height: 375px;
	position: absolute;
}
ul#photo li {
	width: 500px;
	height: 375px;
	float: left;
	position: relative;
}

ul#photo li span {
	bottom: 0;
	left: 0;
	padding: 0 10px;
	width: 480px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-weight: bold;
	background: #333;
	position: absolute;
	opacity: 0.5;
}


/* ThumbnailBTN
-------------------------- */
ul#thumb {
	width: 500px;
	height: 94px;
}
ul#thumb li {
	width: 125px;
	height: 94px;
	float: left;
}

ul#thumb li img {
	opacity: 0.5;
}
ul#thumb li:hover {opacity: 1;}


/* CSS3 PhotoSlideAnimation
-------------------------- */
@-webkit-keyframes AutoSlidePhoto {
	0% {left: 0;}
	20% {left: 0;}
	25% {left: -500px;}

	45% {left: -500px;}
	50% {left: -1000px;}

	70% {left: -1000px;}
	75% {left: -1500px;}

	95% {left: -1500px;}
	100% {left: 0;}
}
ul#photo {
	-webkit-animation-name: AutoSlidePhoto;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count:infinite;
}


/* CSS3 ThumbnailSlideAnimation
-------------------------- */
@-webkit-keyframes AutoSlideThumb {
	0% {opacity: 0.5;-webkit-transform:scale(1);}
	1% {opacity: 1;-webkit-transform:scale(1.2);-webkit-box-shadow: 0 0 10px #fff;z-index:10;}
	20% {opacity: 1;-webkit-transform:scale(1.2);-webkit-box-shadow: 0 0 10px #fff;z-index:10;}
	21% {opacity: 0.5;-webkit-transform:scale(1);}
	100% {opacity: 0.5;-webkit-transform:scale(1);}
}

ul#thumb li#thumb01 img,
ul#thumb li#thumb02 img,
ul#thumb li#thumb03 img,
ul#thumb li#thumb04 img {
	-webkit-animation-name: AutoSlideThumb;
	-webkit-transform: scale(1);
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
}

ul#thumb li#thumb02 img {-webkit-animation-delay: 5s;}
ul#thumb li#thumb03 img {-webkit-animation-delay: 10s;}
ul#thumb li#thumb04 img {-webkit-animation-delay: 15s;}

アニメーション設定箇所で「AutoSlidePhoto」と定義したアニメーション動作で
メイン画像を置いている<ul>の位置「left」の値を変化させてスライドさせています。

もう一つのアニメーション定義「AutoSlideThumb」では、
サムネイルの透過度/拡大/ドロップシャドウのアニメーション動作を設定します。

各サムネイル画像に対して「AutoSlideThumb」定義を実行させますが、
動作開始時間を決める「-webkit-animation-delay」の値を変え、
同じアニメーション動作の開始時間をズラすことで
順々にアニメーションが動作しているように見せています。

全体構成についてはこんな感じです。

本来はサムネイルクリックで
メイン画像とサムネイル画像を動かしたいのですが
まだその部分は「CSS3のみ」の構成では実現できていません。。。
(一度オートスタートさせてしまったCSS3アニメーションは動作の停止などが難しい…)

このサンプルを元にカスタマイズを重ね、
jQueryでのスライドギャラリーと同じ規模のものが
CSS3のみで実現できないかいろいろ試してみたくなります。

CSS3のみでスライドアニメーションが必要になった際のご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから