Hallo!
Ich habe eine Animation, welche ein Screenshot von der normalen Seite wegfallen lässt. Jedoch sieht man danach nur den Background, anstatt den Text. Wie kann ich den Text danach noch anzeigen lassen?
Html:
HTML Code:
<body>
<div id="site" class="pend">
</div>
<div class="text_container">
<h1>Test</h1>
</div>
</body>
CSS:
Code:
body{
width: 100%;
height: 100%;
background-color: #0887FF;
margin: 0;
padding: 0;
}
.text_container{
width: 960px;
height: 100%;
margin: 0 auto;
}
#site{
background-image: url(site.png);
width: 100%;
height: 100%;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.pend {
-webkit-animation-name: pend;
animation-name: pend;
}
@-webkit-keyframes pend {
0% { -webkit-transform: rotate(0); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
20%, 60% { -webkit-transform: rotate(-40deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
40% { -webkit-transform: rotate(-30deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
80% { -webkit-transform: rotate(-35deg) translateY(0); opacity: 1; -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform: rotate(-35deg) translateY(80%); opacity: 0; }
}
@keyframes pend {
0% { transform: rotate(0); transform-origin: top right; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(-40deg); transform-origin: top right; animation-timing-function: ease-in-out; }
40% { transform: rotate(-30deg); transform-origin: top right; animation-timing-function: ease-in-out; }
80% { transform: rotate(-35deg) translateY(0); opacity: 1; transform-origin: top right; animation-timing-function: ease-in-out; }
100% { transform: rotate(-35deg) translateY(80%); opacity: 0; }
}
Die site.png bedeckt den ganzen Bildschirm, der "Test"-Text wird nach der Animation nicht angezeigt...
Dankeschön schon mal an alle hilfreichen Antworten
