Wie erreicht man eine reibungslose Links-Rechts-Bewegung für absolut positionierte Divs in CSS?

Links-Rechts-Bewegung in CSS: Eine generische Lösung

Im Bereich Webdesign ist die Fähigkeit, Elemente fließend zu animieren, von entscheidender Bedeutung . Wenn es jedoch um die Links-Rechts-Bewegung von absolut positionierten Divs geht, entsteht eine häufige Herausforderung: Das Element verschwindet für einen Moment, bevor es wieder erscheint. Dieses Problem ist häufig auf unsachgemäße Animationsübergänge zurückzuführen.

Um dieses Problem zu beheben, ist es wichtig, die Verwendung fester Werte für links oder rechts zu vermeiden. Erwägen Sie stattdessen die Verwendung der Transformationseigenschaft in Verbindung mit left oder right. Diese Technik verhindert ein plötzliches Verschwinden während der Animation.

Hier ist ein aktualisiertes CSS-Snippet, das das Problem des Verschwindens behebt:

<code class="css">@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}</code>

In diesem aktualisierten Code verwenden wir innerhalb von TranslateX(-100%) Die Transformationseigenschaft verschiebt das Element um 100 % nach links und verhindert so ein sichtbares Verschwinden. Dies gewährleistet eine reibungslose und lineare Links-Rechts-Bewegung ohne Unterbrechungen.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine reibungslose Links-Rechts-Bewegung für absolut positionierte Divs in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!