webkit css3 animasyon döngüsü

Question

Soldan sağa animasyon uygulamak için bir arka plan yaptım. Her şey iyi çalışıyor ama arka plan görüntüsü doğru olduğunda, animasyon yeniden başlıyor.

Sürekli olarak çalışmayı nasıl sağlarım? Böylece, soldan sağa her zaman geziniyor (kesilme yok)?

Burada keman bağlantı sadece webkit tarayıcılarda çalışır geçerli:
http://jsfiddle.net/Tu95Y/750/

@-webkit-keyframes slide { 
    from{ 
     background:left; 
    } 
    to{ 
     background:right; 
    } 
} 

#logo{ 
    width:300px; 
    height:200px; 
    background:url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg); 
    -webkit-animation: slide 5s linear infinite; 
} 

Answer 1

Tamam görünüyorsa. o kesinlikle soldan olmayacaktır this page for an explanation and demo

bkz görüntü, yapamazsın. CSS yapması gereken şeyi yapıyor (sonsuz olarak tekrar ediyor), fakat resmin kendisi sürekli değil. İhtiyacınız olan şey, ilk karesi ilkine özdeş olan bir görüntüdür, böylece animasyon bittiğinde, hiç durmamış gibi görünür.

Bu efekti, ekstra uzun bir görüntü oluşturarak ve görüntüyü ekseni boyunca döndürerek elde edebilirsiniz, ancak bu efekt bazı görüntülerde diğerlerinden daha iyi çalışır. Böyle bir şey: Her durumda

, burada sonucudur: http://jsfiddle.net/Tu95Y/751/

@-webkit-keyframes slide { 
    from{ 
     background-position:1725px; 
    } 
    to{ 
     background-position:575px; 
    } 
} 

#logo{ 
    width:575px; 
    height:200px; 
    background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png); 
    -webkit-animation: slide 10s linear infinite; 
} 

Answer 2

Ben çizgisinde bir şey düşünüyorum kudreti benzer bir etki oluşturmak durumunda ihtiyaç daha büyük görüntü kullanılarak "dönüşümlü". bu tahmin gerçek görüntüye bağlı olacaktır/sağ böylece önüne aldığımızda

Answer 3

Biz begnning ve sonunda aynı çerçevenin fikir gibi yaptım ama daha kolaydı sadece 2 kez çoğaltmak ve kullanıcı daha uzun bir animasyon. Bu 8 dakika boyunca çalışacaktır.

@keyframes animatedBackground { 
    0% { background-position: 0 0; } 
    100% { background-position: -4000px 0; } 
} 
@-moz-keyframes animatedBackground { 
    0% { background-position: 0 0; } 
    100% { background-position: -4000px 0; } 
} 
@-webkit-keyframes animatedBackground { 
    0% { background-position: 0 0; } 
    100% { background-position: -4000px 0; } 
} 
@-ms-keyframes animatedBackground { 
    0% { background-position: 0 0; } 
    100% { background-position: -4000px 0; } 
} 
@-o-keyframes animatedBackground { 
    0% { background-position: 0 0; } 
    100% { background-position: -4000px 0; } 
} 

Sonra elemana:

animation: animatedBackground 480s linear; 
-moz-animation: animatedBackground 480s linear; 
-webkit-animation: animatedBackground 480s linear; 
-ms-animation: animatedBackground 480s linear; 
-o-animation: animatedBackground 480s linear;