css3动画支持ie9,CSS3动画进度条IE9 polyfill CSS3Pie

我正在尝试为我的网页创建简单的进度条。

我按照以下方式设置了我的代码：

Some nice info

我的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;

}

}

我现在要做的是使其与IE9兼容。

对于渐变，我打算使用CSS3PIE，但我不知道如何进行动画制作。

如何在IE9上看起来很好看？

我的第一个想法是在IE9中使用动画gif作为背景，但也许这可以完全没有外部图像？

CSS3Pie背景可以动画吗？

编辑：

这是我的临时版本：http://jsfiddle.net/Misiu/BhRtQ/9/我正在使用jQuery动画来设置背景位置的动画。