两种进度条动画的实现：
1、css3，但IE9-不支持。
2、js动画，兼容性好，但没有css3实现的顺畅
Demo：
代码语言：javascript复制<html>
<head>
<title>progress</title>
<script type=”text/javascript” src=”../jQuery1.7.js”></script>
<style type=”text/css”>
body{
margin: 0;
}
#progress{
height: 2px;
background: #b91f1f;
/*定义动画完成时进度条的消失500ms内完成，而不是直接消失*/
transition: opacity 500ms linear;
}
#progress{
/*调用下面定义的progress动画，规定动画3s内完成*/
-webkit-animation: progress 3s;
animation: progress 3s;
}
#progress.done{
opacity: 0;
}
@-webkit-keyframes progress{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
@keyframes progress{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
</style>
</head>
<body>
<div id=”progress”>
</div>
<script type=”text/javascript”>
// 第一次见这种使用方式，定义一个对象，并为其属性值定义动画 ( {property : 0} ).animate( {property : 100}, { duration : 3000, step : function(){ var percentage = Math.round( this.property ); ( “#progress” ).css( “width”, percentage “%” ); if( percentage == 100 ){ 
