CSS3動畫進度條IE9填充CSS3Pie

Question

我試圖爲我的網頁創建簡單的進度欄。 我設置我的代碼如下：

<div class="progress"> 
    <p class="info">Some nice info</p> 
    <div class="update-progress"> 
    <div class="update-progress-bar animate" style="width: 40%"></div> 
</div> 

和我的CSS是這樣的：

.progress { 
    position: relative; 
    margin: 20px -20px -20px; 
    padding: 15px; 
    background: #fafafa; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    border-radius: 0 0 6px 6px; 
    background-image: -webkit-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    background-image: -moz-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    background-image: -o-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    background-image: linear-gradient(to bottom, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2); 
    box-shadow: inset 0 1px white; 
    line-height: 21px; 
    color: #999; 
    text-shadow: 0 1px white; 
} 
.progress .info { 
    line-height: 16px; 
    font-size: 11px; 
    text-align: center; 
} 
.progress .update-progress { 
    clear: left; 
    margin-top: 5px; 
    /*margin: 12px 10px 4px;*/ 
    height: 8px; 
    padding: 3px; 
    background: #ebebeb; 
    border-radius: 7px; 
    box-shadow: inset 0 2px 3px #000000, 0 1px white; 
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px white; 
} 
.progress .update-progress-bar { 
    height: 100%; 
    background: #73c822; 
    border: 1px solid; 
    border-color: #6eb626 #62a21f #5a9122; 
    border-radius: 4px; 
    box-sizing: border-box; 
    background-image: -webkit-linear-gradient(top, #73c822, #67aa24); 
    background-image: -moz-linear-gradient(top, #73c822, #67aa24); 
    background-image: -o-linear-gradient(top, #73c822, #67aa24); 
    background-image: linear-gradient(to bottom, #73c822, #67aa24); 
    box-shadow: inset 0 1px rgb(255, 255, 255); 
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); 
    /*ANIMACJA*/ 
    -moz-transition: width .5s ease-in-out; 
    -o-transition: width .5s ease-in-out; 
    -webkit-transition: width .5s ease-in-out; 
    transition: width .5s ease-in-out; 
} 
.progress .animate { 
    content:""; 
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 
    z-index: 1; 
    background-size: 50px 50px; 
    -moz-animation: move 2s linear infinite; 
    -o-animation: move 2s linear infinite; 
    -webkit-animation: move 2s linear infinite; 
    animation: move 2s linear infinite; 
    overflow: hidden; 
} 
@-webkit-keyframes move { 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: 50px 50px; 
    } 
} 
@-moz-keyframes move { 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: 50px 50px; 
    } 
} 
@keyframes move { 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: 50px 50px; 
    } 
} 

有了這個，我有進度條，看起來像這樣：
我的代碼可以在這裏找到：http://jsfiddle.net/Misiu/BhRtQ/

我現在要做的就是讓它與IE9兼容。

對於漸變我打算使用CSS3PIE，但我不知道如何做這個進度動畫。

我怎樣才能讓這個看起來不錯，在IE9？
我的第一個想法是在IE9中使用動畫gif作爲背景，但也許這可以完全沒有外部圖像？

CSS3Pie背景可以動畫嗎？

編輯：
這是我的臨時版本：http://jsfiddle.net/Misiu/BhRtQ/9/
我使用jQuery animate來設置動畫背景位置。

Answer 1

我真的不認爲CSS3Pie會給你一個很好的體驗。

它當然可以動態控制 - CSS3Pie主頁通過允許您切換效果來提供證據。

問題是動畫比簡單地切換效果要複雜得多。動畫將需要瀏覽器快速連續渲染每一幀。

我從來沒有試圖用CSS3Pie動畫。我猜想這是可能的，但它肯定不會與CSS動畫結合使用，並且我也願意打賭，它將會對您的瀏覽器性能產生絕對的影響。

CSS3Pie非常適合現場效果，但在網頁上使用很多時，會出現性能問題。如果瀏覽器不得不每秒重複處理一次動畫的CSS3Pie效果，那肯定會屬於我「很多」的定義。

我認爲只要爲舊版瀏覽器提供純色回退效果會更好。漸變效果非常好，但它真的不值得爲它犧牲那麼多的瀏覽器性能（尤其是考慮到整個過程要顯示進度條，因此您顯然需要獲得所有瀏覽器性能）。

如果您只需要支持IE9，那麼可以通過使用SVG圖像爲您的背景來實現沒有CSS3Pie的背景效果。這可以作爲數據URL包含在您的CSS代碼中，並且在純CSS中可以很好地作爲IE9的後備解決方案。 See here爲生成器工具，可以爲您提供適當的代碼。

這個解決方案的好處在於它是純粹的CSS，所以它可以和你現有的動畫完美配合。即它基本上只是一個背景圖像，所以通過移動圖像的動畫就可以工作。是的，這是一個圖像，但它不是CSS的外部，所以希望它符合您的標準。 （當然，你也可以用PNG圖像做爲數據網址，但SVG可能會更好）

當然，這對IE8不起作用，但是你在問題中確實指定了IE9 。如果你需要IE8的支持，或者你不喜歡數據URL的解決方案，那麼我的建議就是堅持使用簡單的背景色作爲後備。