変形退場型スライドショー

表示画像が、skew、rotate、scaleで変形した後、stage（表示枠）外に移動退場するタイプのスライドショーである。

サンプル

本サンプル表示用HTML

<div id="stage">
	<div id="p1" class="tr"><img src="img/1.jpg" width="600" height="338"></div>
	<div id="p2" class="tr"><img src="img/2.jpg" width="600" height="338"></div>
	<div id="p3" class="tr"><img src="img/3.jpg" width="600" height="338"></div>
	<div id="p4" class="tr"><img src="img/4.jpg" width="600" height="338"></div>
	<div id="p5" class="tr"><img src="img/5.jpg" width="600" height="338"></div>
</div>

本サンプル表示用CSS

/* 表示枠 */
#stage {
    width: 600px;
    height: 338px;
    position: relative;
    overflow: hidden;
}
/* 画像枠の初期位置 */
.tr {
	position:absolute;
	top:0;
	left:0;
        z-index:-1;
}
/* 画像枠線設定と位置調整 */
.tr img { 
	border:#3FF 5px solid;
	margin:-5px 0 0 -5px;
}
/* 各画像のanimation設定 */
#p1 {
	-webkit-animation: imgTrans 25s -5s infinite;
	animation: imgTrans 25s -5s infinite;
}
#p2 {
	-webkit-animation: imgTrans 25s 0s infinite;
	animation: imgTrans 25s 0s infinite;
}
#p3 {
	-webkit-animation: imgTrans 25s 5s infinite;
	animation: imgTrans 25s 5s infinite;
}
#p4 {
	-webkit-animation: imgTrans 25s 10s infinite;
	animation: imgTrans 25s 10s infinite;
}
#p5 {
	-webkit-animation: imgTrans 25s 15s infinite;
	animation: imgTrans 25s 15s infinite;
}
/* animation */
@-webkit-keyframes imgTrans {
	35% { -webkit-transform:none; left:0; top:0; }
	37.5% { -webkit-transform:skewX(30deg) scaleX(0.8) scaleY(0.4) rotate(-15deg);}
	40% { -webkit-transform: skewX(30deg) scaleX(0.8) scaleY(0.4) rotate(-15deg) translate(600px,-600px); z-index:10;}
	100% { z-index:-1;}
}
@keyframes imgTrans {
	35% { transform:none; left:0; top:0; }
	37.5% { transform:skewX(30deg) scaleX(0.8) scaleY(0.4) rotate(-15deg);}
	40% { transform: skewX(30deg) scaleX(0.8) scaleY(0.4) rotate(-15deg) translate(600px,-600px); z-index:10;}
	100% { z-index:-1;}
}

CSSのスポット解説

・このサンプルでは、スライドが5枚なので、5秒毎の切替えはトータルanimation時間（25秒）の20%となる。そのうち15%は表示、あとの5%で変形・退場となる。
・animationの最初の20%は待機状態。
・20-35% で表示状態にし、引き続き、35-37.5% で変形、37.5-40% でステージ外へ退場させる。
・各画像を20%（5秒）間隔でanimationさせる。