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