I30R6
Neues Mitglied
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Animation Übung</title>
<style type="text/css">
body {
background: #666;
}
@keyframes Einblendung {
100% {opacity: 0.0;}
}
#WhitePlane {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
min-height:100%;
background-color: white;
opacity: 1.0;
animation: Einblendung;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#Box {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 1200px;
}
</style>
</head>
<body>
<div id="WhitePlane"></div>
<div id="Box"></div>
</body>
</html>Ich will den Wechsel zwischen zwei Seiten optisch ansprechender gestalten und durch eine Animation einen weicheren Übergang schaffen bzw. einen weicheren Seitenaufbau simulieren.
Die Seite selbst wird anfänglich von einer weiß gefüllten Div box überdeckt, welche dann langsam an Opacität verliert, bis sie unsichtbar ist und der eigentliche Seiteninhalt darunter zum Vorschein kommt.
Die Divbox mit weißem Background habe ich in der Höhe auf 100% gestellt. Wenn ich nun beim Aufbau der Seite bzw. dem Ablauf der Animation nach unten scrolle, wird dieser Trick leider sichtbar und die Animation verliert ihre Wirkung. Ich könnte das Problem lösen, indem ich die Höheneingabe exakt in Pixel angebe, aber das will ich natürlich ungerne.
Hat jemand vielleicht eine Lösung für mich?
