rernanded
Erfahrenes Mitglied
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
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;
}