generische CSS-Animation für linksgerechte Bewegung

In diesem Artikel werden wir untersuchen, eine generische CSS-Animation zu erstellen, um eine DIV links und rechts zu verschieben und die Kanten seines Containers zu erreichen. Diese Animation kann unabhängig von ihrer unbekannten Länge auf jedes DIV mit absoluter Positionierung angewendet werden.

Das Problem: Die Verwendung von Links führt zu einem momentanen Verschwinden. Dies liegt daran, dass die linke Eigenschaft des DIV bei 100%die Breite des Containers überträgt und zu einem negativen Wert und einer Position vom Bildschirm führt.

Eine flüssigere Lösung: Mischen von Transformationen und links

, um dieses Problem zu lösen und eine glatte, lineare Bewegung zu erreichen, wir stellen Transformation ein. Dies ermöglicht es uns, die DIV relativ zu seiner aktuellen Position zu verschieben und sicherzustellen, dass es die Grenzen des Containers nicht überträgt. 0% { links: 0; } 100% { Links: 100%; Transformation: Translatex (-100%); } } #div1 { / * ... */ Animation: Zerstörung 1S Linear Infinite Alternative; }

In diesem Code verwendet der Keyframe bei 100% sowohl links als auch Transformation. Links bewegt die Div zum rechten Rand, während die Transformation sie weiter nach links übersetzt, um das Überschwingen auszugleichen. Diese Kombination verhindert effektiv, dass das DIV außerhalb des Bildschirms geht.