表示画像が、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させる。
