Animieren Sie ein Div-Hintergrundbild

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: Animieren Sie ein Div-Hintergrundbild

by Guest » 12 Jan 2025, 15:45

Ich habe ein Bild in einem Div mit
Das ist ziemlich groß.

Ich möchte etwas Bewegung in das Hintergrundbild bringen. Ich möchte also ein wenig hineinzoomen und etwas übersetzen, damit es so aussieht, als würde sich das Bild ein wenig bewegen.

Ich möchte, dass es in einer Endlosschleife läuft.

Ich habe versucht, Animate.css mit zu verwenden, aber ich möchte nicht, dass sich das Div bewegt , nur das Hintergrundfoto innerhalb des div. Auch der Pulseffekt ist etwas zu stark. Ich möchte nur, dass es ein wenig Bewegung hat. Vielleicht einfach in x-Richtung nach links und dann nach rechts verschieben

Bearbeiten

Ich habe es versucht< /p>

Code: Select all

@keyframes animatedBackground {
from {
background-size: cover;
background-position: 50% 22%;
}
to {
background-size: cover;
background-position: 100% 22%;
}
}
aber es scheint nicht zu funktionieren, wenn ich „background-size: cover“ verwende?

Bearbeiten 2

Ich habe herausgefunden, dass es funktioniert, aber die Breite beträgt 100 %, also macht es keinen Unterschied, wenn ich „background-position: 50 % 22 %“ verwende. ; oder Hintergrundposition: 100 % 22%;, aber wenn ich die y-Richtung ändere, funktioniert es :-D

Aber wenn ich die Animationszeit auf mehr als 5 Sekunden stelle , es wird sehr verzögert. Gibt es eine Möglichkeit, die Verzögerung zu vermeiden?

Top