Windows 7のようなプログレスバーでグラデーションを無限に動かす

Question

CSS3の機能だけを使用して、div内で左から右に無限にグラデーションを移動することは可能でしょうか？すべてのブラウザをサポートする必要はありません。実験したいだけです。 この例は、青い進捗バーの上に光沢のあるエフェクトです。例が分かります。

このCSSを使用

Answer 1

あなたは（マイケルさんのコメントにlinkに基づいて）勾配は無限に移動させることができます：

.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; 
    } 
}​ 

デモ：http://jsfiddle.net/jhogervorst/X78qN/2/

のWebKitでこれだけ作品ベースのブラウザ（SafariやChromeなど）。ほかのブラウザでも同様に動作させるには、Michael's linkを参照して、さらにCSSをコピーしてください。

編集：私はそれを完璧にしなければなりませんでした。 CSS3のほぼ完全なWindowsの進捗バーについては、新しいデモをご覧ください:)