Hier sind ein paar fragenbasierte Titel, die das Wesentliche Ihres Artikels zusammenfassen: Kurz und knapp: * Wie animiere ich sanfte horizontale Bewegungen in CSS, ohne dass Elemente verschwinden? * CSS-Animation: Ac

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

Diese Frage sucht eine reine CSS-Animation, um ein Div horizontal zwischen links zu verschieben und rechten Kanten seines Behälters. Die Herausforderung bei der Verwendung einfacher Linkswerte besteht darin, dass das Element bei der Bewegung von rechts nach links vorübergehend verschwindet.

Um dies zu überwinden, schlägt die bereitgestellte Antwort vor, Transformation in Kombination mit Links oder Rechts zu nutzen. Dadurch entfällt die Notwendigkeit fester Werte:

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

Durch Anwenden dieser Animation auf das Div mit dem folgenden CSS:

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

Das Div bewegt sich horizontal zwischen den Rändern des Containers und behält dabei bei seine Sichtbarkeit während der gesamten Animation. Diese Lösung ist generisch und kann auf jedes Div mit absoluter Positionierung angewendet werden, unabhängig von seiner Breite.

Das obige ist der detaillierte Inhalt vonHier sind ein paar fragenbasierte Titel, die das Wesentliche Ihres Artikels zusammenfassen: Kurz und knapp: * Wie animiere ich sanfte horizontale Bewegungen in CSS, ohne dass Elemente verschwinden? * CSS-Animation: Ac. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!