Ausführliche Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3

Zwei Möglichkeiten, Koordinaten zu ändern:

1. Traditionelle obere und linke Koordinatenänderungen

2. Transformieren in CSS3 Das Attribut

realisiert den Laufeffekt des Charakters durch die Kombination von CSS3-Animation und Übergang. Im Allgemeinen muss der Bewegungszustand kontrollierbar sein, damit wir weitere Operationen ermöglichen können. Animation wird verwendet, um die Änderung der Bewegung des Charakters zu realisieren, das heißt, die Position der Sprite-Karte wird geändert, und der Übergang dient dazu, die Änderung des Charakters nach links zu realisieren, das heißt, die Koordinaten bewegen sich nach rechts, der Charakter bewegt sich vorwärts , und der Hintergrund bewegt sich nach hinten.

So pausieren Sie den Übergang
Übergang, im Allgemeinen ist der Ort, an dem Sie pausieren möchten, der vom Programm zu Beginn festgelegte Zielpunkt Dies ist eigentlich keine Notwendigkeit, es zu steuern, und es gibt keine Möglichkeit, es zu steuern. Dies ist ein Animation-Übergangseffekt. Der Browser bietet nur einen Rückruf für das Ende der Animation. Natürlich kann es eine Problemumgehung geben: Führen Sie einen Prozess aus, der eine Änderung des Zielübergangswerts erzwingt
Vorgehensweise:

$("button:last").click(function() {
        var left = $boy.css('left');
        // 强制做了一个改变目标left的处理
        // 动画是要运行10秒,所以此时动画还是没有结束的
        $boy.css('left',left);
        // 增加暂停的样式
        $boy.addClass('pauseWalk');
 });

Um den Übergang zu stoppen, Lassen Sie es den aktuellen linken Wert erzwingen.

Einzelheiten finden Sie im Codeblock oben. Der Übergang in der Pausenmethode muss die linke Koordinate festlegen, um einen Pauseneffekt zu erzielen. Der nächste Start muss jedoch auf die vorherige Animation warten . Die Zeit ist vorbei.

Animationspausenmethode

CSS3-Animation direkt bereitstellen Animation-Play-State-Stil zur Steuerung der Animationspausenverarbeitung. Achten Sie beim Schreiben des Animationsstils besonders auf die Kompatibilität verschiedener Browser. Fügen Sie das entsprechende Präfix hinzu. Sie müssen nur die dynamische Animation für das entsprechende Animationszeichenelement verwenden Das Hinzufügen und Löschen dieses Stils kann den Start und die Pause dieses Elfen steuern.

.pauseWalk {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
}

[Verwandte Empfehlungen]

1 im Detail

2. Die 8 Eigenschaften der CSS3-Animation (Animation), die man beherrschen muss

3. Ein Beispiel-Tutorial zur Verwendung von Animationsattributen um eine verzögerte Ausführung zwischen Schleifen zu implementieren

4

Eine Instanz der Überwachung des CSS3-Animationsendereignisses teilen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!