css3底部加载动画,页面加载css3动画底部会出现进度条，动画完了就没了，怎么消除...

因为你写动画样式中用了-号，导致页面产生滚动条(看起来像是进度条)。

当动画开始时，页面比显示屏幕宽，所以此时底部就会有滚动条；

当动画结束时，页面与显示屏幕一样宽，所以此时底部滚动条消失；

例)div{position: absolute; top: 0; bottom: 0; right: -100px; width: 100px;}

.div.start { animation: AAA .5s 1; animation-fill-mode: forwards; }

.div.stop { animation: BBB .5s 1; animation-fill-mode: forwards; }

@keyframes AAA{

from { right: -100px;}

to { right: 0; }

}

@keyframes BBB{

from { right: 0; }

to {right: -100px; }

}

解决方案：用改变width来替代left

div{position: absolute; top: 0; bottom: 0; right: 0; width: 0;}

.div.start { animation: AAA .5s 1; animation-fill-mode: forwards; }

.div.stop { animation: BBB .5s 1; animation-fill-mode: forwards; }

@keyframes AAA{

from { width: 0; }

to { width: 100px; }

}

@keyframes BBB{

from { width: 100px; }

to { width: 0; }

}