body{
    width: 160px;
    height: 600px;
    overflow: hidden;
    margin: 0;
}

div{
    position:absolute;
  
}
img{
    width: 160px;
    height: 600px;
}

#banner {
  position: relative;
  width: 160px;
  height: 600px;
  background-color: #000000;
  cursor: pointer;
  overflow: hidden;
}
.hidden{
    display: none;
}
#blende {
    -webkit-animation-fill-mode: forwards;
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    top: 0;
    -webkit-animation: blende 10s linear 3;
    -ms-animation: blende 10s linear 3;
    animation: blende 10s linear 3;
}
#balkenGruen{
    -webkit-animation: balkenG 10s linear 3 forwards;
    -ms-animation: balkenG 10s linear 3 forwards;
    animation: balkenG 10s linear 3 forwards;
}

#balkenWeiss{

    -webkit-animation: balkenW 10s linear 3 forwards;
    -ms-animation: balkenW 10s linear 3 forwards;
    animation: balkenW 10s linear 3 forwards;
}
#face{

     transform-origin: 0% 30%;    
    -webkit-animation: face2 10s linear 3 forwards;
    -ms-animation: face2 10s linear 3 forwards;
    animation: face2 10s linear 3 forwards;
}

#face img{

    -webkit-animation: face 10s ease-out 3 forwards;
    -ms-animation: face 10s ease-out 3 forwards;
    animation: face 10s ease-out 3 forwards;
}

#vorhang{
    width: 320px;
    -webkit-animation: vh 10s linear 3 forwards;
    -ms-animation: vh 10s linear 3 forwards;
    animation: vh 10s linear 3 forwards;
}

#sendehinw1{
    -webkit-animation: sh1 10s linear 3 forwards;
    -ms-animation: sh1 10s linear 3 forwards;
    animation: sh1 10s linear 3 forwards;
}
#sendehinw2{
    -webkit-animation: sh2 10s linear 3;
    -ms-animation: sh2 10s linear 3;
    animation: sh2 10s linear 3;
}

#sendehinw3{
    -webkit-animation: sh3 10s linear 3 forwards;
    -ms-animation: sh3 10s linear 3 forwards;
    animation: sh3 10s linear 3 forwards;
}

/*BLENDE*/
@-webkit-keyframes blende {0%{opacity:1;}10%{opacity:0;}95%{opacity:0;}100%{opacity:1;}}
@-ms-keyframes blende {0%{opacity:1;}10%{opacity:0;}95%{opacity:0;}100%{opacity:1;}}
@keyframes blende {0%{opacity:1;}10%{opacity:0;}95%{opacity:0;}100%{opacity:1;}}

/*BALKENGRUEN*/
@-webkit-keyframes balkenG {0%{opacity:0;-webkit-transform: translate(-50px,10px);}10%{opacity:0;-webkit-transform: translate(-50px,10px);}13%{opacity:1;-webkit-transform: translate(0,0);}100%{opacity:1;-webkit-transform: translate(0,0);}}
@-ms-keyframes balkenG {0%{opacity:0;-ms-transform: translate(-50px,10px);}10%{opacity:0;-ms-transform: translate(-50px,10px);}13%{opacity:1;-ms-transform: translate(0,0);}100%{opacity:1;-moz-transform: translate(0,0);}}
@keyframes balkenG {0%{opacity:0;transform: translate(-50px,10px);}10%{opacity:0;transform: translate(-50px,10px);}13%{opacity:1;transform: translate(0,0);}100%{opacity:1;transform: translate(0,0);}}

/*BALKENWEISS*/
@-webkit-keyframes balkenW {0%{opacity:0;-webkit-transform: translate(-50px,10px);}11%{opacity:0;-webkit-transform: translate(-50px,10px);}14%{opacity:1;-webkit-transform: translate(0,0);}100%{opacity:1;-webkit-transform: translate(0,0);}}
@-ms-keyframes balkenW {0%{opacity:0;-ms-transform: translate(-50px,10px);}11%{opacity:0;-ms-transform: translate(-50px,10px);}14%{opacity:1;-ms-transform: translate(0,0);}100%{opacity:1;-moz-transform: translate(0,0);}}
@keyframes balkenW {0%{opacity:0;transform: translate(-50px,10px);}11%{opacity:0;transform: translate(-50px,10px);}14%{opacity:1;transform: translate(0,0);}100%{opacity:1;transform: translate(0,0);}}

/*FACE*/
@-webkit-keyframes face {0%{-webkit-transform: translate(-30px,0px);}36%{-webkit-transform: translate(0px,0px);}100%{-webkit-transform: translate(0px,0px);}}
@-ms-keyframes face {0%{-ms-transform: translate(-30px,0px);}36%{-ms-transform: translate(0px,0px);}100%{-ms-transform: translate(0px,0px);}}
@keyframes face {0%{transform: translate(-30px,0px);}36%{transform: translate(0px,0px);}100%{transform: translate(0px,0px);}}

@-webkit-keyframes face2 {0%{-webkit-transform: scale(1,1);}25%{-webkit-transform: transform: scale(1,1);}100%{-webkit-transform: scale(1.1);}}
@-ms-keyframes face2 {0%{-ms-transform: scale(1,1);}25%{-ms-transform: transform: scale(1,1);}100%{-ms-transform: scale(1.1);}}
@keyframes face2 {0%{transform: scale(1,1);}25%{transform: scale(1,1);}100%{transform: scale(1.1);}}

/*VORHANG*/
@-webkit-keyframes vh {0%{-webkit-transform: translate(-50px,0px);}40%{-webkit-transform: translate(65px,0px);}100%{-webkit-transform: translate(110px,0px);}}
@-ms-keyframes vh {0%{-ms-transform: translate(-50px,0px);}40%{-ms-transform: translate(65px,0px);}100%{-ms-transform: translate(110px,0px);}}
@keyframes vh {0%{transform: translate(-50px,0px);}40%{transform: translate(65px,0px);}100%{transform: translate(110px,0px);}}

/*SHENDEHINWEIS1*/
@-webkit-keyframes sh1 {0%{opacity:0;-webkit-transform: translate(0px,15px);}30%{opacity:0;-webkit-transform: translate(0px,15px);}37%{opacity:1;-webkit-transform: translate(0px,0px);}100%{-webkit-transform: translate(0px,0px);}}
@-ms-keyframes sh1 {0%{opacity:0;-ms-transform: translate(0px,15px);}30%{opacity:0;-ms-transform: translate(0px,15px);}37%{opacity:1;-ms-transform: translate(0px,0px);}100%{-ms-transform: translate(0px,0px);}}
@keyframes sh1 {0%{opacity:0;transform: translate(0px,15px);}30%{opacity:0;transform: translate(0px,15px);}37%{opacity:1;transform: translate(0px,0px);}100%{transform: translate(0px,0px);}}

/*SHENDEHINWEIS2*/
@-webkit-keyframes sh2 {0%{opacity:0;-webkit-transform: translate(0px,15px);}32%{opacity:0;-webkit-transform: translate(0px,15px);}38%{opacity:1;-webkit-transform: translate(0px,0px);}100%{-webkit-transform: translate(0px,0px);}}
@-ms-keyframes sh2 {0%{opacity:0;-ms-transform: translate(0px,15px);}32%{opacity:0;-ms-transform: translate(0px,15px);}38%{opacity:1;-ms-transform: translate(0px,0px);}100%{-ms-transform: translate(0px,0px);}}
@keyframes sh2 {0%{opacity:0;transform: translate(0px,15px);}32%{opacity:0;transform: translate(0px,15px);}38%{opacity:1;transform: translate(0px,0px);}100%{transform: translate(0px,0px);}}

/*SHENDEHINWEIS3*/
@-webkit-keyframes sh3 {0%{opacity:0;-webkit-transform: translate(0px,15px);}57%{opacity:0;-webkit-transform: translate(0px,15px);}61%{opacity:1;-webkit-transform: translate(0px,0px);}100%{-webkit-transform: translate(0px,0px);}}
@-ms-keyframes sh3 {0%{opacity:0;-ms-transform: translate(0px,15px);}57%{opacity:0;-ms-transform: translate(0px,15px);}61%{opacity:1;-ms-transform: translate(0px,0px);}100%{-ms-transform: translate(0px,0px);}}
@keyframes sh3 {0%{opacity:0;transform: translate(0px,15px);}57%{opacity:0;transform: translate(0px,15px);}61%{opacity:1;transform: translate(0px,0px);}100%{transform: translate(0px,0px);}}