画像が横に１０分割される大きさの矩形が順次FadeInして画面を覆って閉じ、次いで順次FadeOutして次の画面を開けるタイプのスライドショーで、ブラインドが開閉するようなタッチを出したつもりである。

サンプル

　　

本サンプル表示用HTML

<div id="stage">
    <div id="frame">
      <div id="photo1" class="photo"><img src="img2/1.jpg"></div>
      <div id="photo2" class="photo"><img src="img2/2.jpg"></div>
      <div id="photo3" class="photo"><img src="img2/3.jpg"></div>
      <div id="photo4" class="photo"><img src="img2/4.jpg"></div>
      <div id="photo5" class="photo"><img src="img2/5.jpg"></div>
    </div>
    <div id="rec1" class="rec"></div>
    <div id="rec2" class="rec"></div>
    <div id="rec3" class="rec"></div>
    <div id="rec4" class="rec"></div>
    <div id="rec5" class="rec"></div>
    <div id="rec6" class="rec"></div>
    <div id="rec7" class="rec"></div>
    <div id="rec8" class="rec"></div>
    <div id="rec9" class="rec"></div>
    <div id="rec10" class="rec"></div>
</div>

HTML概要説明

・表示用写真を#frame内にすべて表示させる。
　（cssで全て画面中央に重ねて表示させ、初期は全て非表示にする）
・短冊形矩形１０枚を、横に並べて画面を覆うようにし、opacityを0にして透明にしておく。

本サンプル表示用CSS

#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
.photo {
	position: absolute;
	width: 600px;
	height: 338px;
}
.photo img {
        visibility:hidden;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
        -webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 img {
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img{
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
.rec {
	width:60px;height:338px;background:#fff;
	position:absolute;
	top:0;
	opacity:0;
	-webkit-animation: sliceaction 6s infinite;
	animation: sliceaction 6s infinite;
}
#rec1 { left:0;
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;}
#rec2 { left:60px;
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;}
#rec3 { left:120px;
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;}
#rec4 { left:180px;
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;}
#rec5 { left:240px;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;}
#rec6 { left:300px;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;}
#rec7 { left:360px;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;}
#rec8 { left:420px;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;}
#rec9 { left:480px;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;}
#rec10 { left:540px;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;}
@-webkit-keyframes imgTrans {
 	0% { visibility:visible;}
 	20% { visibility:hidden;} 
 	100% { visibility:hidden;}
}
@-webkit-keyframes sliceaction {
	0% { opacity:1;}
	5% { opacity:1;}
	20% { opacity:0;}
	80% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}
@keyframes imgTrans {
 	0% { visibility:visible;}
 	20% { visibility:hidden;} 
 	100% { visibility:hidden;}
}
@keyframes sliceaction {
	0% { opacity:1;}
	5% { opacity:1;}
	20% { opacity:0;}
	80% { opacity:0;}
	95% { opacity:1;}
	100% { opacity:1;}
}

CSSのポイント説明

・#stage から #frame までのCSSは、フェイドイン・アウト型と同じであるが、animation(imgtrans) は、FadeIN OUT を使わずに、visibility で表示、非表示を切り替えるようにしている。
・短冊矩形は、スライド切替のタイミングに合わせて、0.1秒差で順次非透明化させてスライドを覆い、次いで、同じく0.1秒差で順次透明化させ、次のスライドが現れるようにしている。
　（短冊矩形の animation 間隔は、スライド切替間隔の6秒に合わせる）
・最初の矩形のanimationのスタートを、-0.4sにしているのは、スライド切替のタイミングと矩形の開閉のタイミングを調整するため。