Programmiererforum

@keyframes animatedBackground {
from {
background-size: cover;
background-position: 50% 22%;
}
to {
background-size: cover;
background-position: 100% 22%;
}
}

Ich habe ein Bild in einem Div mit

[code]
[/code]

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]@keyframes animatedBackground {
from {
background-size: cover;
background-position: 50% 22%;
}
to {
background-size: cover;
background-position: 100% 22%;
}
}
[/code]

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?