Spraw, aby gradient przesuwał się bez końca po pasku postępu, tak jak w Windows 7

Question

Zastanawiam się, czy możliwe jest robienie gradientowego ruchu wewnątrz elementu div od lewej do prawej bez końca za pomocą tylko funkcji CSS3? Nie ma potrzeby obsługiwać wszystkich przeglądarek, po prostu chcę eksperymentować. Przykładem jest błyszczący efekt na niebieskim pasku postępu. Doceniany jest przykład.

Answer 1

Stosując tę ​​CSS można pozwolić na ruch gradientu nieskończoność (na podstawie link w komentarzu Michała):

.bar { 
    background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat; 
    -webkit-background-size: 50% 100%; 
    -webkit-animation-name: moving-gradient; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes moving-gradient { 
    0% { 
     background-position: left bottom; 
    } 

    100% { 
     background-position: right bottom; 
    } 
}​ 

Demo:http://jsfiddle.net/jhogervorst/X78qN/2/

Zadziała tylko w WebKit oparte na przeglądarce (np. Safari i Chrome). Aby działał także w innych przeglądarkach, zobacz Michael's link i skopiuj więcej CSS.

Edytuj: Musiałem zrobić to idealnie. Zobacz nową wersję demonstracyjną, aby uzyskać niemal doskonały pasek postępu w systemie Windows w CSS3 :)