body{
    width: 300px;
    height: 250px;
    overflow: hidden;
    margin: 0;
}

div{
    position:absolute;
  
}
img{
    width: 300px;
    height: 250px;
}
.hidden{
    display: none;
}
#vorhang{
    width: 404px;
    height: 250px;
}

#banner {
  position: relative;
  width: 300px;
  height: 250px;
  background-color: #000000;
  cursor: pointer;
  overflow: hidden;
}

#blende {
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    top: 0;
    -webkit-animation: blende 10s linear 3 forwards;
    -ms-animation: blende 10s linear 3 forwards;
    animation: blende 10s linear 3 forwards;
}
#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 img{
    -webkit-animation: face 10s ease-out 3 forwards;
    -ms-animation: face 10s ease-out 3 forwards;
    animation: face 10s ease-out 3 forwards;
}

#face{
     transform-origin: 15% 50%;
    -webkit-animation: face2 10s linear 3 forwards;
    -ms-animation: face2 10s linear 3 forwards;
    animation: face2 10s linear 3 forwards;
}


#vorhang{
    -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 forwards;
    -ms-animation: sh2 10s linear 3 forwards;
    animation: sh2 10s linear 3 forwards;
}

#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);}16%{opacity:0;-webkit-transform: translate(-50px,10px);}18%{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);}16%{opacity:0;-ms-transform: translate(-50px,10px);}18%{opacity:1;-ms-transform: translate(0,0);}100%{opacity:1;-moz-transform: translate(0,0);}}
@keyframes balkenG {0%{opacity:0;transform: translate(-50px,10px);}16%{opacity:0;transform: translate(-50px,10px);}18%{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);}17%{opacity:0;-webkit-transform: translate(-50px,10px);}19%{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);}17%{opacity:0;-ms-transform: translate(-50px,10px);}19%{opacity:1;-ms-transform: translate(0,0);}100%{opacity:1;-moz-transform: translate(0,0);}}
@keyframes balkenW {0%{opacity:0;transform: translate(-50px,10px);}17%{opacity:0;transform: translate(-50px,10px);}19%{opacity:1;transform: translate(0,0);}100%{opacity:1;transform: translate(0,0);}}

/*FACE*/
@-webkit-keyframes face {0%{-webkit-transform: translate(-60px,0px);}36%{-webkit-transform: translate(0px,0px);}100%{-webkit-transform: translate(0px,0px);}}
@-ms-keyframes face {0%{-ms-transform: translate(-60px,0px);}36%{-ms-transform: translate(0px,0px);}100%{-ms-transform: translate(0px,0px);}}
@keyframes face {0%{transform: translate(-60px,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(-160px,0px);}48%{-webkit-transform: translate(30px,0px);}100%{-webkit-transform: translate(30px,0px);}}
@-ms-keyframes vh {0%{-ms-transform: translate(-160px,0px);}48%{-ms-transform: translate(30px,0px);}100%{-ms-transform: translate(30px,0px);}}
@keyframes vh {0%{transform: translate(-160px,0px);}48%{transform: translate(30px,0px);}100%{transform: translate(30px,0px);}}

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

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

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