CSSだけで作るスライドショー - シャッターオープン/クローズ - 

/* グローバル変数の定義 */
:root {
 --delay: 3s; /* スライドショーの速度 */
}
/* 表示枠の定義 */
#frame {
 position: relative;
 margin: 0 auto;
 width : 100px;
 height: 140px;
 overflow: hidden;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
 position: absolute;
 width: 100px;
 height: 140px;
 background-size: 100% auto;
 float: left;
 left: 100px;
 -moz-animation: imgPassToLeft 30s infinite;
 -webkit-animation: imgPassToLeft 30s infinite;
 animation: imgPassToLeft calc(var(--delay) * 5) infinite;
}
#photo1 {
 background-image: url("../../../img/cd_dvd/s/EICP-1579.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: 0s;
 -webkit-animation-delay: 0s;
 animation-delay: 0s;
}
#photo2 {
 background-image: url("../../../img/cd_dvd/s/TOBW-3120_21.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: var(--delay);
 -webkit-animation-delay: var(--delay);
 animation-delay: var(--delay);
}
#photo3 {
 background-image: url("../../../img/cd_dvd/s/MICP-11133.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: calc(var(--delay) * 2);
 -webkit-animation-delay: calc(var(--delay) * 2);
 animation-delay: calc(var(--delay) * 2);
}
#photo4 {
 background-image: url("../../../img/cd_dvd/s/TOBW-3057_58.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: calc(var(--delay) * 3);
 -webkit-animation-delay: calc(var(--delay) * 3);
 animation-delay: calc(var(--delay) * 3);
}
#photo5 {
 background-image: url("../../../img/cd_dvd/s/WPCR-867.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: calc(var(--delay) * 4);
 -webkit-animation-delay: calc(var(--delay) * 4);
 animation-delay: calc(var(--delay) * 4);
}
/* シャッター */
#shutter {
 position: absolute;
 left: -150px;
 top: -150px;
 width: 100px;
 height: 140px;
 border: 150px solid #555;
 -webkit-animation: borderdeform calc(var(--delay) * 5) infinite;
 -webkit-animation-delay: calc(var(--delay) / 2);
 animation: borderdeform calc(var(--delay) * 5) infinite;
 animation-delay: calc(var(--delay) / 2);
}
/* スライド切替animation設定 */
@keyframes imgPassToLeft {
 0%    { left:    0%;}
 19.99%{ left:    0%;}
 20%   { left: -100%;}
 39.99%{ left: -100%;}
 40%   { left: -200%;}
 59.99%{ left: -200%;}
 60%   { left: -300%;} 
 79.99%{ left: -300%;}
 80%   { left: -400%;}
 99.99%{ left: -400%;}
 100%  { left:    0%;}
}
@-webkit-keyframes imgPassToLeft {
 0%    { left:    0%;}
 19.99%{ left:    0%;}
 20%   { left: -100%;}
 39.99%{ left: -100%;}
 40%   { left: -200%;}
 59.99%{ left: -200%;}
 60%   { left: -300%;} 
 79.99%{ left: -300%;}
 80%   { left: -400%;}
 99.99%{ left: -400%;}
 100%  { left:    0%;}
}
/* シャッターanimation設定 */
@keyframes borderdeform {
 0%  {width: 100px;height: 140px; left: -150px;top: -150px;}
 8%  {width: 100px;height: 140px; left: -150px;top: -150px;}
 10% {width:   0px;height:   0px; left: -100px;top:  -80px;}
 12% {width: 100px;height: 140px; left: -150px;top: -150px;}
 20% {width: 100px;height: 140px; left: -150px;top: -150px;}
 28% {width: 100px;height: 140px; left: -150px;top: -150px;}
 30% {width:   0px;height: 140px; left: -100px;top: -150px;}
 32% {width: 100px;height: 140px; left: -150px;top: -150px;}
 40% {width: 100px;height: 140px; left: -150px;top: -150px;}
 48% {width: 100px;height: 140px; left: -150px;top: -150px;}
 50% {width: 100px;height:   0px; left: -150px;top:  -80px;}
 52% {width: 100px;height: 140px; left: -150px;top: -150px;}
 60% {width: 100px;height: 140px; left: -150px;top: -150px;}
 68% {width: 100px;height: 140px; left: -150px;top: -150px; border-radius: 160px;}
 70% {width:   0px;height:   0px; left: -100px;top:  -80px; border-radius: 100px;}
 72% {width: 100px;height: 140px; left: -150px;top: -150px; border-radius: 160px;}
 80% {width: 100px;height: 140px; left: -150px;top: -150px;}
 88% {width: 100px;height: 140px; left: -150px;top: -150px; transform: rotate( 0deg) scale(1.2,1.2);}
 90% {width: 100px;height:   0px; left: -150px;top:  -80px; transform: rotate(45deg) scale(1.2,1.2);}
 92% {width: 100px;height: 140px; left: -150px;top: -150px; transform: rotate( 0deg) scale(1.2,1.2);}
 100%{width: 100px;height: 140px; left: -150px;top: -150px;}
}
@-webkit-keyframes borderdeform {
 0%  {width: 100px;height: 140px; left:-150px;top:-150px;}
 8%  {width: 100px;height: 140px; left:-150px;top:-150px;}
 10% {width:   0px;height:   0px; left:-100px;top: -80px;}
 12% {width: 100px;height: 140px; left:-150px;top:-150px;}
 20% {width: 100px;height: 140px; left:-150px;top:-150px;}
 28% {width: 100px;height: 140px; left:-150px;top:-150px;}
 30% {width:   0px;height: 140px; left:-100px;top:-150px;}
 32% {width: 100px;height: 140px; left:-150px;top:-150px;}
 40% {width: 100px;height: 140px; left:-150px;top:-150px;}
 48% {width: 100px;height: 140px; left:-150px;top:-150px;}
 50% {width: 100px;height:   0px; left:-150px;top: -80px;}
 52% {width: 100px;height: 140px; left:-150px;top:-150px;}
 60% {width: 100px;height: 140px; left:-150px;top:-150px;}
 68% {width: 100px;height: 140px; left:-150px;top:-150px; border-radius:160px;}
 70% {width:   0px;height:   0px; left:-100px;top: -80px; border-radius:100px;}
 72% {width: 100px;height: 140px; left:-150px;top:-150px; border-radius:160px;}
 80% {width: 100px;height: 140px; left:-150px;top:-150px;}
 88% {width: 100px;height: 140px; left:-150px;top:-150px; transform: rotate( 0deg) scale(1.2,1.2);}
 90% {width: 100px;height:   0px; left:-150px;top: -80px; transform: rotate(45deg) scale(1.2,1.2);}
 92% {width: 100px;height: 140px; left:-150px;top:-150px; transform: rotate( 0deg) scale(1.2,1.2);}
 100%{width: 100px;height: 140px; left:-150px;top:-150px;}
}