CSS Background Animation springt bei jeder Wiederholung

Question

Ich habe diese Hintergrund Animation mit CSS.

<style>
@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -1000px 0; }
}

#animate-area { 
    width: 100%; 
    height: 200px; 
    background-image: url("clouds.png");
    background-position: 0px 0px;

    animation: animatedBackground 15s linear infinite;
}
</style>

<div id="animate-area"></div>

Die funktioniert eigentlich auch soweit. Das einzige Problem ist das es nach jeder Wiederholung von einem Bild kurz nach rechts springt bevor es normal weiterscrollt.

Answer 1

Hast du den Wert der negativen "background-position" auf die Breite deines Bildes angepasst?

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -1000px 0; }
}

Die "-1000px" sind die Breite vom Hintergrundbild.