Ich möchte eine HTML5-Animation implementieren, die etwas mehr beinhaltet, als nur ein Element von Punkt A nach Punkt B zu verschieben. Deshalb denke ich über die Verwendung von Keyframes anstelle von Übergängen nach. Ich möchte jedoch, dass die Animation nur einmal ausgeführt wird und nur ausgelöst wird.
Das Problem ist zweifach: 1) Wenn die Animation beendet ist, kehrt das Element zu seiner Startposition zurück. Gibt es eine Möglichkeit, dass es bis auf weiteres an der Endposition bleibt? 2) Gibt es eine Möglichkeit, die Animation später aus Javascript neu zu starten?
Die andere mögliche Lösung, die ich sehe, wäre, einige Übergänge mit dem Ereignis onTransitionEnd zu verketten.
Was ist die beste Lösung, wenn es um Leistung geht? Ich ziele nur auf Webkit-Browser, einschließlich Mobile.
EDIT: basierend auf dem Kommentar von @ Christofer-Vilander habe ich eine JSfiddle gemacht, die im Prinzip das macht, was ich wollte. Danke!
HTML:
%Vor%Javascript:
%Vor%CSS:
%Vor% Fügen Sie eine Klasse im html-Element mit Javascript und dem gewünschten CSS-Animationsregelsatz für diese Klasse hinzu. Verwenden Sie animation-fill-mode: forwards; , damit die Animation einmal ausgeführt wird.
Entfernen Sie dann die Klasse aus dem Element, um die Animation onClick erneut auszuführen.
Tags und Links animation performance css3 css-animations css-transitions