@charset "utf-8";
#stage {
    position: relative;
    width: 600px;
    height:338;
    margin: 0 auto;
}
/* 表示枠 */
#frame {
    width: 600px;
    height: 338px;
    position: relative;
    overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
    position:absolute;
    top:0;
        width:3000px;
    -webkit-animation: imgPassToLeft 30s infinite;
    animation: imgPassToLeft 30s infinite;
}
/*各写真の並びを水平に設定*/
.pic {
    float:left;
}
/* スライドの上層で開閉するシャッター */
#shutter {
    position:absolute;
    left:-350px;top:-350px;
    width: 600px;
    height: 340px;
    border: 350px solid #555;
    -webkit-animation:borderdeform 30s infinite;
    -webkit-animation-delay: 3s;
    animation:borderdeform 30s infinite;
    animation-delay: 3s;
}
/* スライド切替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:600px;height:340px;left:-350px;top:-350px;}
    8% { width:600px;height:340px;left:-350px;top:-350px;}
    10% {width:  0px;height:  0px;left: -50px;top:-180px;}
    12% {width:600px;height:340px;left:-350px;top:-350px;}
    20% {width:600px;height:340px;left:-350px;top:-350px;}
    28% {width:600px;height:340px;left:-350px;top:-350px;}
    30% {width:  0px;height:340px;left: -50px;top:-350px;}
    32% {width:600px;height:340px;left:-350px;top:-350px;}
    40% {width:600px;height:340px;left:-350px;top:-350px;}
    48% {width:600px;height:340px;left:-350px;top:-350px;}
    50% {width:600px;height:  0px;left:-350px;top:-180px;}
    52% {width:600px;height:340px;left:-350px;top:-350px;}
    60% {width:600px;height:340px;left:-350px;top:-350px;}
    68% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
    70% {width:  0px;height:  0px;left: -50px;top:-180px;border-radius:600px;}
    72% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
    80% {width:600px;height:340px;left:-350px;top:-350px;}
    88% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
    90% {width:600px;height:  0px;left:-350px;top:-180px;transform: rotate(45deg) scale(1.2,1.2);}
    92% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
    100%{width:600px;height:340px;left:-350px;top:-350px;}
}
@-webkit-keyframes borderdeform {
    0% { width:600px;height:340px;left:-350px;top:-350px;}
    8% { width:600px;height:340px;left:-350px;top:-350px;}
    10% {width:  0px;height:  0px;left: -50px;top:-180px;}
    12% {width:600px;height:340px;left:-350px;top:-350px;}
    20% {width:600px;height:340px;left:-350px;top:-350px;}
    28% {width:600px;height:340px;left:-350px;top:-350px;}
    30% {width:  0px;height:340px;left: -50px;top:-350px;}
    32% {width:600px;height:340px;left:-350px;top:-350px;}
    40% {width:600px;height:340px;left:-350px;top:-350px;}
    48% {width:600px;height:340px;left:-350px;top:-350px;}
    50% {width:600px;height:  0px;left:-350px;top:-180px;}
    52% {width:600px;height:340px;left:-350px;top:-350px;}
    60% {width:600px;height:340px;left:-350px;top:-350px;}
    68% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
    70% {width:  0px;height:  0px;left: -50px;top:-180px;border-radius:600px;}
    72% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
    80% {width:600px;height:340px;left:-350px;top:-350px;}
    88% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
    90% {width:600px;height:  0px;left:-350px;top:-180px;transform: rotate(45deg) scale(1.2,1.2);}
    92% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
    100%{width:600px;height:340px;left:-350px;top:-350px;}
}