html, body, #openning{ width:100%; height:100%; }
#openning{
background-color: #FFF;
position: fixed; top: 0; left: 50%;
display: table;
opacity: 0;
animation: anim2 12s linear;
width:50%; height:100%;padding:1px;
z-index:-999;
}
.kabe{
background-color: #fff;
position: fixed; top: 0; left: 0;
display: table;
opacity: 0;
animation: anim6 12s linear;
width:51%; height:100%;
}
#openning>div{display: table-cell;width:100%;height:100%;text-align:center;vertical-align: middle;position: relative;right: 50%;animation: anim7 12s linear;}

#image-frame{display: inline-block;/*border: 10px solid #273779;*/width: 200px;height:200px;overflow: hidden;position: relative;
relative;border-radius: 10px; padding:1px;
}
#image{padding: 0px;animation: anim1 2s linear;}
#image img{
    width:100%;    
}
@keyframes anim1{
from{
padding: 50px;

} 
to{
padding: 0px;
transform:rotatey(360deg);
}
}
@keyframes anim2{
0%{ opacity: 1;  z-index:999;} 
50%{ opacity:1;}
62%{ opacity: 1; left:50%;}
90%{ opacity:1;}
95%{ left:200%;}

100%{ opacity: 1;z-index:-99;left:200%}

}
@keyframes anim6{
0%{ opacity: 1;  z-index:999;} 
50%{ opacity:1;}
62%{ opacity: 1; left:0%;}
90%{ opacity:1;}
95%{ left:-200%;}

100%{ opacity: 1;z-index:-99;left:-200%;}

}
@keyframes anim7{
0%{ opacity: 1;  z-index:999;} 
50%{ opacity:1;}
57%{transform:rotate(0deg);}
61%{transform:rotate(360deg);}


100%{ opacity: 1;z-index:-99;transform:rotate(360deg);}

}



#main{ height:1000px; background-color: #FFC; }



.reflection {
    height: 40px;
    width: 20px;
    position    :absolute;
    top         :0px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out 2;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 5s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 5s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 5s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    75% { transform: scale(0) rotate(45deg); opacity: 0; }

    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    75% { transform: scale(0) rotate(45deg); opacity: 0; }

    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }

}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}





#image-frame #image::after,
#image-frame #image::before {
    background-color: #273779;
    content: '';
    display: block;
    position: absolute;
    animation: anim3 5s linear;
    z-index:-1;

}
#image-frame::after,
#image-frame::before {
    background-color: #273779;
    content: '';
    display: block;
    position: absolute;
    animation: anim4 5s linear;
    z-index:-1;

}
@keyframes anim3{
0%{  height:0;} 
80%{height:0;}
100%{   height:100%;}
}
@keyframes anim4{
0%{  width:0;} 
80%{width:0;}
100%{   width:100%;}
}


#image-frame::after {
   /* height: 2px;
    left: -1px;
    top: -1px;
    width: 0px;*/

    height:15px;
    left: 0px;
    top: 0px;
    width: 0px;
}

#image-frame::before {
    /*bottom: -1px;
    height: 2px;
    right: -1px;
    width: 0px;*/

    height:15px;
    bottom: 0px;
    right: 0px;
    width: 0px;
}
#image-frame #image::after {
    /*bottom: -1px;
    height: 0px;
    left: -1px;
    width: 2px;*/

    bottom: 0px;
    height: 0px;
    left: 0px;
    width: 15px;
}

#image-frame #image::before {
    /*height: 0px;
    right: -1px;
    top: -1px;
    width: 2px;*/

    height: 0px;
    right: 0px;
    top: 0px;
    width: 15px;
}

#image-frame::after,
#image-frame::before {
    width: 100%;
    
}

#image-frame #image::after,
#image-frame #image::before {
    height: 100%;
    
}