Mit JavaScript Werte in @-webkit-keyframes dynamisch ändern?

[Hanna]

Hallo Leute,

ich habe folgendes CSS aus dem Leaves-Beispiel der Safari-Reference-Libary:

@-webkit-keyframes drop  
{  
    0%   { -webkit-transform: translate(0px, -150px); }  
    100% { -webkit-transform: translate(0px, 600px); }  
}

Damit kann allgemein erreicht werden, dass sich die Blätter von -150px bis 600px auf der y-Achse bewegen.

Leider habe ich keine Ahnung wie ich von JavaScript (z.B. mit JQuery's css()-Methode den Endwert (hier 600px) dynamisch halten kann?
Ich will nämlich die Animationsbreite (hier: 600px) immer auf die aktuelle Browser-Größe anpassen. Und weil man i.d.R. nie weiß wie groß diese maximal sein kann, muss ich das dynamisch mit JavaScript machen!

Ich weiß das der obige Code nur im Safari funktioniert!
Der Grund ist, wenn ich es richtig verstanden habe, dass folgendes:
@-webkit-keyframe irgendeinName
{
    0%   { ... }
    100% { ... }
}

von der Webkit-Engine bereitgestellt wird und diese gibt es ja meines Wissens nur in Zusammenhang mit dem Safari-Browser.

Mich würde zudem auch noch interessieren, wie man diese Anweisung browser-übergreifender schreiben könnte, d.h. quasi wie kann ich ohne "@-webkit-keyframes..." durch CSS erreichen, dass nach dem vollständigen Laden des "documents" die Blätter dauerhaft von y=-150px bis y=600px bewegt werden, ohne JavaScript einzusetzen? D.h. quasi nachdem das "document" fertig geladen wurde.
Ich weiß, dass dies im Zusammenhang mit dem neuen CSS3 in Safari/Mozilla etc. mit z.B. einem hover-Event geht.
Beispiel:

div.leave:hover  
{  
    -webkit-transform: scale(2);  
    -moz-transform: scale(2);  
}

Aber zu load habe ich bisher nichts gefunden und außerdem wäre interessant wie man diese Bewegung dann unendlich halten kann (bei dem webkit-keyframekann man das nämlich angeben).
Weiß jemand von Euch da vielleicht irgendwas dazu?

Den Quell-Code aus der Safari-Reference-Libary findet ihr hier:
Safari-Reference-Libary

Hierbei handelte es sich um das Projekt "WithCSSExtension", wenn Ihr es runter geladen habt.

Falls irgendjemand von Euch zu einer der Beiden Anliegen etwas weiß, dann bitte ich doch eine kurze Antwort zu posten :-).
Ich danke schon mal im Voraus.

Viele Grüße

Hanna

[LX]

Hallo, Hanna!

  
// hier kannst Du den Inhalt auch automatisch generieren:  
var keystyle = $('<style type="text/css">@-webkit-keyframe { ... }</style>').appendTo('head');  
// wenn Du die Änderung überschreiben willst:  
keystyle.remove();  
// ...und dann den neuen Style einbauen...

Gruß, LX

[Hanna]

Hallo LX,

vielen Danke für den Tipp.

Ich hatte das auch schon mal so ähnlich probiert, aber es hatte irgendwie nicht geklappt.

Durch Dich bin ich drauf gekommen das ganze einfach nur im JavaScript (wie Du oben beschrieben hast) einzufügen und nicht schon vorher extern in einer Datei. Dann klappt es nämlich jetzt auch :-)!

Vielen Danke für die schnell Antwort.

Viele Grüße

Hanna