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动画来动画背景位置。

Answer 1

老实说，我不认为CSS3Pie会给你一个好的经验。

它当然可以被动态控制-- CSS3Pie主页通过允许你切换效果来提供这方面的证据。

问题是动画比简单切换效果要复杂得多。动画需要浏览器快速地连续呈现每一帧。

我从来没有尝试过用CSS3Pie动画。我猜想这是可能的，但它肯定不会与CSS动画一起工作，而且我也愿意打赌，这将是你的浏览器性能的绝对优势。

CSS3Pie对于spot效果很好，但是当它在页面上被大量使用时，它会出现性能问题。如果浏览器必须以每秒多次的速度重新处理CSS3Pie效果，这肯定属于我对“很多”的定义。

我认为你最好只为旧的浏览器提供一个坚实的颜色。梯度效应很好，但实际上不值得为此牺牲那么多的浏览器性能(特别是考虑到，重点是显示一个进度条，因此您显然需要所有的浏览器性能)。

如果您只需要支持IE9，那么就可以在没有CSS3Pie的情况下实现这样的背景效果，方法是为您的背景使用和使用SVG图像。这可以作为一个数据URL包含在你的CSS代码中，并且在普通CSS中很好地工作，作为IE9的回退解决方案。可以为您提供适当代码的生成器工具的看这里。

这个解决方案的好处是它是纯CSS，所以它将与您现有的动画完美地工作；也就是说，它基本上只是一个背景图像，所以您的动画通过移动图像将只是工作。是的，这是一个图像，但它不是外部的CSS，所以希望它符合您的标准。(当然，您也可以使用PNG映像作为数据url，但是SVG可能会更好)

当然，这对IE8不起作用，但是您确实在问题中指定了IE9。如果您需要IE8支持或您不喜欢的数据-URL解决方案，那么我的建议只是坚持一个朴素的背景颜色作为一个倒退。