Sorunsuz arkaplan animasyonu

Question

Bu daha pürüzsüz hale getirmenin bir yolu var mı? Ya da bunu nasıl daha iyi yapacağını bilen varsa ben hepim kulaklarım. İşte ben ne var

html { 
    background: url(Images/landscape.jpeg)repeat-y; 
    background-size: 150%; 
    background-position: bottom; 
    -webkit-animation: backgroundScroll 190s linear infinite; 
    animation: backgroundScroll 190s linear infinite; 
} 

@-webkit-keyframes backgroundScroll { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: -400px 0; 
    } 
} 

@keyframes backgroundScroll { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: -400px 0; 
    } 
} 

Answer 1

Olabilir olsun bir elemanda arka plan görüntüsü ayarlama ve daha sonra transform: translate ile tüm eleman hareketli iyi sonuçlar:

@keyframes doScroll { 
    from { 
    transform: translateX(0); 
    } 
    to { 
    transform: translateX(-400); 
    } 
} 

Kontrol dışarı bu eski ama article hala alakalı .

Answer 2

Anladım! Sadece aralık hızıyla oynam gerekiyordu. Onu yaklaşık 85 s'ye kadar yavaşlattım ve çok daha yumuşak. Onu uzun süredir sürüklüyordum.

Answer 3

Böyle yapabilirsiniz:

html { 
 

 
    background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y; 
 
    background-size: 150%; 
 
\t background-position: 0px 0px; 
 
\t animation: animatedBackground 15s linear infinite; 
 
\t -moz-animation: animatedBackground 15s linear infinite; 
 
\t -webkit-animation: animatedBackground 15s linear infinite; 
 
\t -ms-animation: animatedBackground 15s linear infinite; 
 
\t -o-animation: animatedBackground 15s linear infinite; 
 
} 
 
@keyframes animatedBackground { 
 
\t 0% { background-position: 0 0; } 
 
\t 100% { background-position: -400px 0; } 
 
} 
 
@-moz-keyframes animatedBackground { 
 
\t 0% { background-position: 0 0; } 
 
\t 100% { background-position: -400px 0; } 
 
} 
 
@-webkit-keyframes animatedBackground { 
 
\t 0% { background-position: 0 0; } 
 
\t 100% { background-position: -400px 0; } 
 
} 
 
@-ms-keyframes animatedBackground { 
 
\t 0% { background-position: 0 0; } 
 
\t 100% { background-position: -400px 0; } 
 
} 
 
@-o-keyframes animatedBackground { 
 
\t 0% { background-position: 0 0; } 
 
\t 100% { background-position: -400px 0; } 
 
}