css3实现进度条的模拟
两种进度条动画的实现：
1、css3，但IE9-不支持。
2、js动画，兼容性好，但没有css3实现的顺畅
Demo：
<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 ){
$( "#progress" ).addClass( "done" );
}
}
} );
</script>
</body>
</html>
