Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-10-30 12:34:03
Original
370 Leute haben es durchsucht

How to Create a Smooth Left-Right CSS Animation for a Div Within Its 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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!