CSS Transition Animation Shake: Warum schütteln meine Elemente bei der Animation, wie kann man sie lösen?

CSS Transition Animation Jitter: Löst geschickt das Problem der Animationsverzögerung

Wenn Sie das CSS transition verwenden, um Animationseffekte zu erstellen, begegnen Sie häufig nervige Animation Jitter. Sie möchten beispielsweise, dass sich das Element nach oben bewegt, wenn die Maus schwebt und einen reibungslosen Übergang durch transition erzielt:

 Randboden: 64px;
Übergang: Margin-Bottom 0,3s Leichtigkeit;
Willensänderung: Randboden;

Der tatsächliche Effekt kann jedoch dazu führen, dass die Elemente an der Animationsgrenze wiederholt erschüttet werden. Dies liegt daran, dass subtile Unterschiede im Browser die Verwendung margin-bottom mit transition dazu führen können, dass Animationen bei der Berechnung von Layouts stottern.

Wie vermeiden Sie Animation Jitter?

Eine effektive Lösung besteht darin, transform anstelle von margin-bottom zu verwenden, um eine Elementverschiebung zu erreichen. transform auslöst nicht das Layout -Neubestellungen und das erneute Abziehen, wodurch Jitter effektiv vermieden wird.

Der folgende Code verwendet transform , um dieselbe Animation der Aufwärtsbewegung zu implementieren:

 Transformation: Translatey (-20px); /* Verwenden Sie Translatey, um klarer zu sein*/
Übergang: 0,3S -Leichtigkeit;

Indem Sie das Element vertikal um 20 Pixel verschieben und transition zur Steuerung des Übergangseffekts der transform verwenden, können Sie eine reibungslose Animation erreichen und das durch margin-bottom verursachte Jitter-Problem vollständig lösen. Diese Funktion des transform macht es die beste Wahl für den Umgang mit solchen Animations -Jitter -Problemen.

Das obige ist der detaillierte Inhalt vonCSS Transition Animation Shake: Warum schütteln meine Elemente bei der Animation, wie kann man sie lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!