Wie erstelle ich eine glatte Links-Rechts-CSS-Animation für ein Div in seinem Container?

Generische CSS-Animation für Links-Rechts-Bewegung

In diesem Artikel untersuchen wir die Erstellung einer generischen CSS-Animation, um ein Div nach links zu verschieben und rechts, bis er die Ränder seines Behälters erreicht. Diese Animation kann auf jedes Div mit absoluter Positionierung angewendet werden, unabhängig von seiner unbekannten Länge.

Das Problem: Die direkte Verwendung von „Links“ führt zu einem vorübergehenden Verschwinden

Zunächst bei Verwendung von „Links“. Bei 0 % und 100 % kann es dazu kommen, dass das Div während der Bewegung vorübergehend verschwindet. Dies liegt daran, dass bei 100 % die Left-Eigenschaft des Div über die Breite des Containers hinausgeht, was zu einem negativen Wert und einer Position außerhalb des Bildschirms führt.

Eine flüssigere Lösung: Transform und Left mischen

Um dieses Problem anzugehen und eine reibungslose, lineare Bewegung zu erreichen, führen wir Transformation ein. Dadurch können wir das Div relativ zu seiner aktuellen Position verschieben und sicherstellen, dass es die Grenzen des Containers nicht überschreitet.

Hier ist eine aktualisierte Version der Animation mit Transformation:

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  /* ... */
  animation: destraSinistra 1s linear infinite alternate;
}

In diesem Code verwendet der Keyframe bei 100 % sowohl Links als auch Transformation. Left verschiebt das Div an den rechten Rand, während transform es weiter nach links verschiebt, um das Überschwingen auszugleichen. Diese Kombination verhindert effektiv, dass das Div vom Bildschirm verschwindet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine glatte Links-Rechts-CSS-Animation für ein Div in seinem Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!