CSS3で実装されたグラデーションスライド効果

<div class="css-slideshow">
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" /><figcaption><strong>CSS3:</strong> CSS3 は、セマンティック構造やパフォーマンスを犠牲にすることなく、Web アプリを強化する幅広いスタイル設定と効果を提供します。さらに、Web Open Font Format (WOFF) は、Web がこれまで提供してきたものよりもはるかに優れたタイポグラフィの柔軟性と制御を提供します。</figcaption> 
	</図>
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" /><figcaption><strong>セマンティクス:</strong> 構造に意味を与えるセマンティクスは、HTML5 の中心にあります。より豊富なタグ セット、RDFa、マイクロデータ、マイクロフォーマットにより、プログラムとユーザーの両方にとってより便利なデータ駆動型の Web が実現します。</figcaption> 
	</図>
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-offline.jpg" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" /><figcaption><strong>オフラインとストレージ:</strong> HTML5 アプリ キャッシュ、ローカル ストレージ、インデックス付き DB、ファイル API 仕様により、Web アプリはより速く起動し、インターネットに接続していなくても動作します。</figcaption> 
	</図>
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-device.jpg" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" /><figcaption><strong>デバイス アクセス:</strong> Geolocation API から始めて、Web アプリケーションはデバイスに対応した豊富な機能とエクスペリエンスを提供できます。オーディオ/ビデオ入力アクセスからマイクやカメラ、連絡先やイベントなどのローカル データ、さらには傾きの向きまで、驚くべきデバイス アクセスのイノベーションが開発され、実装されています。</figcaption> 
	</図>
<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-connectivity.jpg" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" /><figcaption><strong>接続性:</strong> より効率的な接続性は、より多くのリアルタイム チャット、より高速なゲーム、より優れたコミュニケーションを意味します。Web ソケットと Server-Sent Events は、クライアントとサーバー間のデータをこれまで以上に効率的にプッシュします。</figcaption> 
	</図>
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-multimedia.jpg" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" /><figcaption><strong>マルチメディア:</strong> オーディオとビデオは HTML5 Web の第一級要素であり、アプリやサイトと調和して機能します。ライト、カメラ、アクション!</figcaption> 
	</図>
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-3d.jpg" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" /><figcaption><strong>3D、グラフィックス、効果:</strong> SVG、Canvas、WebGL、CSS3 3D 機能により、ブラウザーでネイティブにレンダリングされる魅力的なビジュアルでユーザーを驚かせることができます。</figcaption> 
	</図>
	<図>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-performance.jpg" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" /><figcaption><strong>パフォーマンスと統合:</strong> Web Workers や XMLHttpRequest 2 などのさまざまなテクニックやテクノロジーを使用して、Web アプリと動的 Web コンテンツを高速化します。ユーザーが待つ必要はありません。</figcaption> 
	</図>
  </div>  
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">画像とキャプションは W3C から引用</a></p>

体{
フォントファミリ: "HelveticaNeue-Light"、"Helvetica Neue Light"、"Helvetica Neue"、Helvetica、Arial、"Lucida Grande"、sans-serif; 
  フォントの太さ: 300;
}
.css-スライドショー{
  位置: 相対的;
  最大幅: 495px;
  高さ: 370ピクセル;
  マージン: 5em 自動 .5em 自動;
}
.css-スライドショー図{
  マージン: 0;
  最大幅: 495px;
  高さ: 370ピクセル;
  背景: #000;
  位置: 絶対;
}
.css-スライドショー画像{
  ボックスの影: 0 0 2px #666;
}
.css-スライドショー図キャプション{
  位置: 絶対;
  上: 0;
  色: #fff;
  背景: rgba(0,0,0, .3);
  フォントサイズ: .8em;
  パディング: 8px 12px;
  不透明度: 0;
  遷移: 不透明度 .5 秒;
}
.css-slideshow:hover 図のキャプション{
  遷移: 不透明度 .5 秒;
  不透明度: 1;
}
.css-スライドショー属性{
  最大幅: 495px;
  テキスト配置: 右;
  フォントサイズ: .7em;
  フォントスタイル: 斜体;
  マージン:0 自動;
}
.css-スライドショー属性 a{
  色: #666;
}
.css-スライドショー図{
  不透明度:0;
}
図:n番目の子(1) {
  アニメーション: xfade 48 秒 42 秒 無限;
}
図:n番目の子(2) {
  アニメーション: xfade 48 秒 36 秒 無限;
}
図:n番目の子(3) {
  アニメーション: xfade 48 秒 30 秒 無限;
}
図:n番目の子(4) {
  アニメーション: xfade 48 秒 24 秒 無限;
}
図:n番目の子(5) {
  アニメーション: xfade 48 秒 18 秒 無限;
}
図:n番目の子(6) {
  アニメーション: xfade 48s 12s 無限;
}
図:n番目の子(7) {
  アニメーション: xfade 48s 6s 無限;
}
図:n番目の子(8) {
  アニメーション: xfade 48s 0s 無限;
}

@keyframesフェード{
  0%{
    不透明度: 1;
  }
  10.5% {
    不透明度: 1;
  }
  12.5%
    不透明度: 0;
  }
  98% {
    不透明度: 0;
  }
  100% {
    不透明度: 1;
  }
}