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的解决方案，那么我的建议就是坚持使用简单的背景色作为后备。