Comment rendre cette animation d'image-clé CSS fluide au redémarrage?

Question

J'ai une animation d'image-clé CSS qui est censé ressembler à de la neige. Il est défini pour durer 20 secondes et boucle infiniment, ce qu'il fait. Le problème est que lorsque l'animation atteint la fin après l'heure définie et redémarre, il s'agit en quelque sorte d'un redémarrage saccadé/maladroit.

Y a-t-il un moyen de rendre la lecture plus fluide lorsque l'animation est en boucle, de sorte qu'elle ne semble pas redémarrer mais juste un flux constant?

body { 
    height: 100%; 
    /*background-color: #333;*/ 
    background-color: #6b92b9; 
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png'); 
    -webkit-animation: snow 20s linear infinite; 
    -moz-animation: snow 20s linear infinite; 
    -ms-animation: snow 20s linear infinite; 
    animation: snow 20s linear infinite; 
} 

@-webkit-keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@-moz-keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@-ms-keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

Answer 1

la position de fond doit être multipliée par la taille de l'original. exemple, si votre taille de l'image est 100x100 alors la position de fond peut être 100x100, 100x200, 200x100, 200x200, et ainsi de suite

body { 
 
    height: 100%; 
 
    /*background-color: #333;*/ 
 
    background-color: #6b92b9; 
 
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png'); 
 
    animation: snow 5s linear infinite both; 
 
} 
 
@keyframes snow { 
 
    0% { 
 
    background-position: 0px 0px, 0px 0px, 0px 0px; 
 
    } 
 
    50% { 
 
    background-color: #b4cfe0; 
 
    } 
 
    100% { 
 
    background-position: 300px 300px, 400px 400px, 500px 500px; 
 
    background-color: #6b92b9; 
 
    } 
 
}