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

Question

什么原因造成的

Answer 1

你一不给代码，二不给图片，谁知道怎么消除？

Answer 2

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

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

例）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; }
    }