Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:
Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.
Gibt es da eine EINFACHE Lösung für Anfänger wie mich?
XXXXXXXX_____HTML_____XXXXXXXX
<div class="intro">
</div>
<a class="testbutton" href="#">GO</a>
XXXXXXXX_____CSS_____XXXXXXXX
body{
margin: 0;
padding: 0;
}
.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}
@keyframes animation_in {
0% {height: 100%;}
100% {height: 20px;}
}
.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}
@keyframes redirectanimationout {
0% {height: 20px;}
100% {height: 100%;}
}
.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}
