以下の画像五枚を使って、お見せしよう。

	怒濤のヘッダークリエイターjyushisirin様より授かりし逸品。 スピンオフした一萬アイコンも大活躍中です。
	記事に使った阿知賀編アニメのすこやん設定画から。 斜めってるのは効果とかではなく、単にこの角度で撮ってあっただけ
	これもやっつけですみません！ 善野さん小6バージョンッヌ！
	我が心の故郷、石岡市高浜の絶景 ここにすこやんを感じる…///
	もはや絵の要素なし。 半透明処理をしたやつと、２パターンを使います。

スライドショーを作ってみた

作ってみたというか(笑)
とても分かりやすかったので、ひな形をこちら様から例によってパクリお借りしました。
【スライドイン・アウト型スライドショー | css だけで作る フォトギャラリー・スライドショー】
スライドショー専門のサイトということで、いろいろ目移りしたのですが、キミに決めた！
のがこちら。

スタンダード

この動きはどこかで…あっ(普通の察し
咲-Saki-まとめアンテナ様のヘッダーがこんな感じですね。
あちらは更に画像を選択するぽちボタンつきの優れものですが。
あのページを古いIEで開くと、画像のスライドはせず、パッと切り替わります。
ということは、CSS3で作られたものと推測されます。
今回ご紹介するコードも、JavaScript成分はナッシングで、CSSしか使っておりません。

では基本となるHTML/CSSスタイルシートの記述を御覧下さい。
まずはHTMLから。

<div class="stage">
  <div id="frame">
    <div><img src="画像1のURL" width="100%" /></div>
    <div><img src="画像2のURL" width="100%" /></div>
    <div><img src="画像3のURL" width="100%" /></div>
    <div><img src="画像4のURL" width="100%" /></div>
    <div><img src="画像5のURL" width="100%" /></div>
  </div>
</div>

わりとすっきりしていますね。
div が三層続き、三層目の div は五つあり、それぞれが img要素を包んでいる、という構造です。
第一層の div は stage というクラスに属し、第二層には frame という名前があり、第三層の div にはそうした設定はありません。
外側の div にも、三層目の div に個別にリンクを貼ることもできます。
また、img要素の widthプロパティにはすべて"100%"という値を指定しています。
これは画像サイズによらず、領域ぴったりに表示するためです。
ただ、標準より縦長の場合は下が見切れ、横長の場合は背景が見えてしまいますが…

ではその stage、frame、及び名無しの div を使って、どのように画像をスライドさせているか、スタイルシートを見ながら説明…できるかな…

div.stage {
    width: 570px; height: 190px;
    margin: 1em auto;
    background: Transparent;
    box-shadow: 3px 3px 3px RosyBrown;
}

上は基本領域の設定。幅と高さ、外側の余白、及び透明背景と影を指定しています。
余白は上下が1文字分(1em)。
左右にautoを設定すると、領域が中央になるように勝手に計算してくれます。
影はデザイン上不要なら削除。ここでは弊ブログのテーマ色 RosyBrown を指定しています。
本記事では複数箇所に表示するために div.stage とクラス指定していますが、必要がなければ div#stage と ID指定する方がいいです。
複数指定できるクラスだと、ブラウザがページ内を最後まで検索して、その分時間がかかるので。

div#frame {
    width: 570px; height: 190px;
    position: relative;
    overflow: hidden;
    background: url(背景画像のURL) repeat;
    border-radius: 0.5em;
}

次に frameという名前をつけたdiv要素。
これが画像を表示する枠になります。
ここの overflow: hidden;はとても大事な指定で、これがないと引っ込めたい画像が隠れなくなります。
背景は、透過しない普通の画像しか使わない場合は、特に指定しなくてもいいです。
上の div.stage は拡張用に親要素にしていますが、取り敢えずこの子要素も結果的に全く同じ領域です。
border-radius はカドを丸くする指定。おされアピールです。

#frame div {
    width: 570px; height: 190px;
    position: absolute;
    float: left;
    left: 100%;
    animation: imgtrans 30s infinite;  /* 全部で30秒 */
}
#frame div:nth-child(1) { animation-delay: 0s; }
#frame div:nth-child(2) { animation-delay: 6s; }
#frame div:nth-child(3) { animation-delay: 12s; }
#frame div:nth-child(4) { animation-delay: 18s; }
#frame div:nth-child(5) { animation-delay: 24s; }
/*   ↑ 一枚当たり6秒のタイムラグで動き始める指定    */
}

この #frame の内側に、画像を載せる div 要素を定義します。
21行目は何もしていないので書かなくても同じですが、後で説明する改変版で必要になるので、残しておきます(伏線)。
因みに、frame に画像しか乗せないのであれば、ここは

#frame img {
/*  (略)  */

#frame img:nth-child(1) { animation-delay: 0s; }
/*(以下略)*/

と書いても問題なく動作しますが、やはり拡張を考慮して img要素よりも自由度の高い div要素で括っておきます。
画像をスライドしているのではなく、領域をスライドしている、と考えれば、そこにテキストやらを含めたBOXをデザインできますからね。
なお、オリジナルでは

div#photo1 { animation-delay: 0s; }
/*(以下略)*/

のようにここの div要素を ID指定してありましたが、先の記事で学んだ :nth-child() を使ってみました。
隣り合う兄弟要素なので、この書き方の方がブラウザには解釈しやすそうですし。

通常、HTMLでは子要素は親要素から出ることはありません。
そのマークアップ構造と同じく、視覚的にも入れ子になります。
しかし、positionプロパティで 親に relative、子に absolute を指定すると、これがヒモになって、子要素を自由に動かせます。
ヒモというのは親に対する絶対座標。上の div の中にある left: 100%; の部分です。
leftプロパティは、「左から、指定した分ずれる」という意味です。px、em、%などの単位で指定できます(数値が大きいほど左から遠ざかる＝右へ行くので、感覚的には逆なんじゃ…と不評なプロパティ名なのですよー)。
%は親要素(の横幅)に対する比率ですが、この div は親である div#frame と同じ大きさなので、100%を指定すると、親の領域からぴったり外れることになります。
下で定義している imgtrans というアニメーションは、その left の値を変化させているのです。

@keyframes imgtrans1 {
    0% { left:100%; }    /*    0.0秒    */
    5% { left:0%; }      /*    1.5秒    */
    20% { left:0%; }     /*    6.0秒    */
    25% { left:-100%; }  /*    7.5秒    */
    100% { left:-100%; } /*   30.0秒    */
}

左側の 0% 5% 20%…はアニメのタイムスケジュールで、left の%とは関係ありません。
秒数に換算した値を、右側のコメントにしてあります。
上でやっているのは要するに

1. 初めの1.5秒間:左から100%の位置(frame の右外)→frame の中心へ移動
2. 次の4.5秒間:そのまま静止
3. 次の1.5秒間:frame の中心→左から-100%の位置(frame の左外)へ移動
4. 次の22.5秒間:そのまま frame外で待機

3.の開始時点で6秒経過しているので、上で設定した animation-delay に従い、次に控えた div:nth-child(next) が1.の動作を開始します。
こうして五枚の画像が、30秒かけて一回りするわけです。
同じタイミングで十枚に増やすなら、一枚当たり6秒×10で、#frame div 内の animation プロパティの秒数の部分を60s とし、nth-child(10)まで6秒の時間差をつけながら増設、keyframes のタイミング設定は時間の縮尺を考慮して5%→2.5%、20%→10%、25%→12.5%などとします。
減らす場合も同様に。
全体としての辻褄が合えばいいので、再生スピードなども含めて、自由に調整できます。

以上を基本仕様に、スタイルシートだけを書き変えて、違う動きにしてみたいと思います。

リバース！

最初の例が右→左なのに対し、こちらは左→右。それだけ…？　それだけです

@keyframes imgtrans2 {
    0% { left:-100%; }
    5% { left:0%; } 
    20% { left:0%; } 
    25% { left:100%; }
    100% { left:100%; }
}

このように、left の値の符号を逆にするだけ。
ちょーかんたんだよー
初めは left の所を right にすりゃいんじゃね？と思ったんですが、何箇所も書き換えるの面倒だなーとグズグズしてるうちにこっちを思いつきました。
なお、上の #frame div 内の left の初期値 100%はそのままでもいいです。どうせ見えてないんで。
でも初期値と0秒時点の値が違ってるのはきもちわるい…！という人(例:某NS)は、-100%に合わせてもいいです。意味無いんですけどね。

重なっていく

@keyframes imgtrans3 {
    0% { left:-100%; }
    5% { left:0%; } 
    25% { left:0%; } 
    30% { left:100%; }
    100% { left:100%; }
}

新しい画像がフレームに完全に収まって停止した25%のタイミングを待って古い画像が退場するので、上に重なっていくように見える、というパターンです。
でも、これはね… 五枚目から一枚目に戻るところが、ちょっとイケてないんですよねえ…五枚目を半透明な画像にした下のと見比べると、問題点が分かると思いますが、つまりこの五枚の画像には上下の位置関係があって、一番下である一枚目を、一番上である五枚目の「上に重ねる」のは無理、ってことなんです。
デコに油性でも、こればかりは上重ムリなんですわ。何言ってんの

めくれていく

これは keyframe は「重なっていく」のと同じですが、順番が逆になるのでここを書き変えます。
animation-delay より :nth-child の()の中を書き変える方が早いので、こう書き直しました。

#frame div:nth-child(5) { animation-delay: 0s; }
#frame div:nth-child(4) { animation-delay: 6s; }
#frame div:nth-child(3) { animation-delay: 12s; }
#frame div:nth-child(2) { animation-delay: 18s; }
#frame div:nth-child(1) { animation-delay: 24s; }

これも「重なっていく」と同様、五枚目から一枚目への切り替えのところがダメだね。
画像を重ねると、HTML記述順由来の上下関係がごまかせないので…
てことは、重ならないように動かせばまあ見られるのでは？
ということで

敢えて背景を見せる

    animation: imgtrans 30s infinite linear;

ここでは、animationプロパティに linear という値を追加しています。正確には追加ではなく、初期値である ease をこれに変えたということです。
animation の子属性、animation-timing-function の略記法です。
linear は等速の動き、ease は滑らかな緩急ある動きです。
下の keyframes の方でやや細かめに指定しているため、ease だとちょっとクド過ぎたので、linear にしてみました。

@keyframes imgtrans5 {
    0% { left:100%; }
    4% { left:20%; } 
    5% { left:0%; } 
    15% { left:0%; } 
    25% { left:-100%; }
    100% { left:-100%; }
}

ちょっとセンスが無いのでアホみたいな動きではありますが、重ならなければまあ五枚目→一枚目の繫ぎの問題は考えずに済みます。
うーん、やっぱりオリジナルが一番ですね…

そこで JavaScript

CSS3よりも JavaScript の方がいいです。
CSS3はデザインには向いてるし便利だけど、動きをつけようとするとなんか裏技みたいのをひねくり出して「その手があったか！」をやらないとやりたいことができないというイメージというかトラウマを植えつけられました。
その点 JavaScript(jQuery) は愚直にシコシコやってればなんとかなる、という印象。
JavaScript で作ったやつも紹介する予定でしたが、ちょっと長くなって来たのでこの次にします。