Ich möchte zwei (oder mehr) CSS-Transformationseigenschaften separat mit einer Keyframe-Animation wie dieser animieren:
%Vor%HTML:
%Vor%translatex Animation sollte mit 0s Verzögerung beginnen und für 5 Sekunden dauern. Rotatez-Animation sollte mit 1s Verzögerung beginnen und für 3 Sekunden dauern. Also beginnt das rez. Element sich zu bewegen, nach 1 Sekunde beginnt es sich zu drehen, nach 3 Sekunden hört es auf zu rotieren und nach 1 weiteren Sekunde beendet es seine Bewegung.
Animation anwenden:
%Vor%Das Problem hier ist, dass nur rotatez Animation angewendet wird. Meine Frage ist: Gibt es irgendwelche Möglichkeiten, eine solche Animation mit nur CSS (Keyframe-Animation, Übergänge) zu implementieren oder brauche ich JS und RequestAnimationFrame?
EDIT :: mein FIDDLE
Ja, das ist möglich. Anstatt 2 Animationsnamen zu benennen, erstellen Sie nur eine Animation mit beiden Aktionen innerhalb
%Vor%Sehen Sie sich eine Google-Präsentation zur CSS-Animation an: google css-Animation, Folie 12
Wenn Sie uns eine Geige geben, kann ich meine Antwort auf Ihr Beispiel aktualisieren.
BEARBEITEN: Hier ist ein Workaround, obwohl es ein bisschen eine grobe Version ist: $: Geige
%Vor%Jetzt ist Ihre Animation linear, aber um es so einfach wie möglich zu machen, habe ich nur mit Anfang und Ende der Animation gespielt. Immer noch nicht perfekt, aber das ist der einzige Weg, wie ich sehe, wie du bekommen kannst, was du willst!
Tags und Links css animation transform css-animations