Problem mit CSS3 Animation

[Tronjer]

Hallo,
ich baue hier gerade eine Seite mit CSS3-Animationen und bin dabei in ein Problem gelaufen. Beim Klick auf den Link "about" startet eine kleine Animation, die als blauer Kreis mit 20 Pixel Durchmesser rechts oben im Browser beginnt, im Endstatus eine schwarze Box mit den Maßen 450x300 Pixel darstellt und dabei mit dem Block auf der rechten Seite ("Hello") unten bündig ist. Damit die Bündigkeit beim Skalieren des Browserfensters erhalten bleibt, habe ich beide DIVs absolutiert positioniert, womit sie aus dem Textfluss herausgehoben werden und sich gegenseitig auch nicht stören sollten.

Mein Problem ist, dass die Boxanimation während ihres Verlaufs und obwohl sie ja mit nur 20 Pixeln startet, offenbar stets das größere Endformat berücksichtigt. Wenn sich der Kreis im Bereich der unteren schwarzen Leiste befindet, zeigt der Browser Scrollbalken an, und auch das rechte DIV ruckelt etwas, bevor die Animation abgeschlossen ist.

Wir bekomme ich das weg? Im ersten Schritt hatte ich ein overflow:hidden auf Box und Keyframes gelegt, was leider nichts brachte. Der nächste Gedanke war, die Größe der schwarzen Box in der Klasse .boxsize zu definieren, diese dann per addClass() und setTimeout(), erst mit einigen Sekunden Verzögerung anzuhängen. Das war leider auch nicht erfolgreich.

Hätte jemand vielleicht noch einen anderen Lösungsansatz?

 

[Tronjer]

Hmm, niemand eine Ahnung oder zuviel Code? :(

Dann formuliere ich es noch mal vereinfacht, soweit das möglich ist.

Ich habe eine Webseite mit folgenden Elementen: Oben den Header, in der Mitte zwei nebeneinander stehende Boxen und unten den Footer. Unabhängig vom Viewport sollen Header und Footer die gesamte Breite einnehmen und am oberen, bzw. unteren Bildschirmrand kleben. Außerdem müssen die beiden unterschiedlich hohen Boxen unten bündig sein und dürfen sich auch beim Skalieren des Fensters nicht überlappen. Bedeutet also Width und Height des Bodys auf 100% und Boxen absolut positionieren, damit sich die Entfernung vom unteren Rand her definieren lässt. Soweit der einfache Teil.

Problem ist nun, dass eine der beiden Boxen während des Seitenrefreshs durch die Animation ihre Position verändert und dabei zeitweilig unterhalb des Footers steht. Wodurch sich Scrollbalken im Browser zeigen und es zu einem unschönen Ruckeln kommt. Diesen Effekt will ich unterdrücken. Ich bin auch sicher, dass dafür eine Lösung existiert, ich komme nur nicht drauf.



Ich habe jetzt nochmal versucht, dem Body eine dynamische max-height zu geben, aber das hilft leider auch nicht.

<script>
    var pageHeight = $("body").height();
    $("body").css("max-height", pageHeight + "px");
</script>

 

[pax]

... oder zuviel Code?

also das auf gar keinen Fall ;)
Tatsächlich sprengt die Beschreibung ohne Code meine Vorstellungskraft.