Animieren Sie ein Div-Hintergrundbild ⇐ CSS

[Guest]

Ich habe ein Bild in einem Div mit

Code: Select all

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

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?