Animation Ende krieg ich nicht hin


rernanded

Erfahrenes Mitglied
#1
Hallo,
ich hab mir eine Animation moving gebaut, aber das Ende krieg ich nicht hin. Das soll darin bestehen, das der Inhalt in #wrapper_content langsam verschwindet, nachdem die Animation moving in #wrapper beendet ist.

MONI

HTML:
#wrapper {   
   
   background-color: transparent; /*rgba(255,255,255,0.5);*/
   position: absolute;
   top: 50%;
   left: 50%;
   
   z-index: 10;

animation: moving 10s;           
}
@keyframes moving {
  0% {   
    transform: translate(0px, -600px);   
    -moz-transform: translate(0px, -600px);
    -ms-transform: translate(0px, -600px);
    -o-transform: translate(0px, -600px);
    -webkit-transform: translate(0px, -600px);   
  }
  33% {
    transform: translate(0px, 0px);   
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
  }
66% {
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}
100% {
    transform: translate(600px, 0px);   
    -moz-transform: translate(600px, 0px);
    -ms-transform: translate(600px, 0px);
    -o-transform: translate(600px, 0px);
    -webkit-transform: translate(600px, 0px);
  }
}

#wrapper-content {   
   
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   font-family: 'Anton';
   font-size: 40px;
   color: #ff5500;
   line-height: 40px;
   z-index: 100;
   background-color: transparent;
   text-align: center;
}
 

Sempervivum

Erfahrenes Mitglied
#2