css的transfrom特效-进度条

任务进度的进度条：

1.transform动画过程：

注意：宽度设置为0

@-webkit-keyframes animate-positive {
0% { width: 0%;}
}
@-ms-keyframes animate-positive {
0% { width: 0%;}
}
@-moz-keyframes animate-positive {
0% { width: 0%;}
}
@keyframes animate-positive {
0% { width:0%; }
}

2.对元素设置效果：

// 外层进度框：
.progress{
width: 6.94rem;
height: .04rem;
background-color: #300707;
position: absolute;
top: .2rem;
left: .25rem;
}
// 内层进度条：
.progress_bar{
width: 1200px;
height: 4px;
animation: animate-positive 5s;
-webkit-animation: animate-positive 5s;
-ms-animation: animate-positive 5s;
-moz-animation: animate-positive 5s;
background-color: #deae5c;
border-radius: 2px;
position: absolute;
top: 0;
}

3.页面元素使用内联样式：

<div class="progress_bar" style="width: 12%"></div>

*需要注意的是，如果是从后台拿数据，渲染的进度长度，需要把元素动态添加到页面上，否则会出现没有动画效果，直接在动画执行时间结束后，直接显示进度条长度。

            <div class="progress">
                <!-- 进度条占位 -->
            </div>
            <script>
				    setTimeout(function(){
				        Html = '';
				        Html += '<div class="progress_bar" style="width: 12%"><i class="site"></i><i class="site"></i><i class="site"></i><i class="site"></i><i class="site"></i></div>'
				        $(".progress_bar_box .progress").append(Html);
				    },3000)

倒计时3秒为给后台拿数据的缓冲时间，等数据全部拿到，再将元素渲染到页面上