css - 水平动画导致CSS中的垂直滚动条

Question

我正在制作网站动画(一个旋转的齿轮和一个无限左右移动的文本)。这是我的正文代码

body {
overflow:hidden;
height:100%;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
//background attachments
}

这是同一文件中的相关动画代码片段

#cog { /* image on maintenance.html page */
display:block;
margin:auto;
margin-top:300px;
animation:spin 5s ease infinite;
}
@keyframes spin { /* animation for image on maintenance.html page */
from { transform:rotate(-45deg); }
50% { transform:rotate(10deg); }
75% { transform:rotate(-10); }
to { transform:rotate(-45deg); }
}
#maintenance { /* text image under cog graphic on maintenance.html page */
display:block;
margin:auto;
/* margin-top:30px; */
animation:maint 5s ease infinite;
overflow: hidden;
}
@keyframes maint { /* animation for second image on maintenance.html page */
50% { transform: translate(-200px, 0); }
}

当文本到达右侧的最后一点(或非常接近它)时，它会导致出现垂直滚动条。并且文本越靠近右侧，滚动条就变得越大(滚动条内的条变小)。当文本开始从最后的右点向左移动时，反之亦然。

我已经检查过SO post on the similar matter , the article , and another article 。他们都建议做一个溢出:隐藏，但它对我不起作用:我尝试了正文和文本动画本身。

我还注意到，只有当鼠标位于动画容器内时(不仅仅是空闲鼠标，而是四处移动)，才会出现此滚动条。

它出现在我的两台不同尺寸的显示器上，我正在使用 Google Chrome 来测试它。

更新

尝试建议的 codepen 和 fiddle 后，看起来带有导航栏的容器出现了问题。我会尝试一下并分享结果。

更新2

解决了我的问题，请参阅答案。

Answer 1

仅将 overflow:hidden 应用于正文是不够的。该行还需要应用于容器(在我的例子中为导航栏)，该容器存在于页面上，但不直接参与动画容器。

codepen的用法和 jsfiddle工具帮助我解决了我的问题。

希望我的回答和这些工具能够帮助网页设计师将来解决此类问题。