css动画空白：nowrap；

Question

我正在制作一个 css 动画，让文本从屏幕右侧开始，向左移动，然后环绕并重复。

我有一些相当大的字母，所以我正在做

white-space: nowrap;

因此文本不会向下移动到另一行。

我的动画滚动效果很好

0% {
    transform: translateX(5%)
}
100% {
    transform: translateX(-100%)
}

我把

animation: animation-name 5s infinite;
animation-timing-function: linear;

在课堂上

我唯一遇到的问题是带有大字母和空白： nowrap 导致页面宽度增加，因为字母正在推动页面宽度。有没有办法让动画仍然滚动但不推动页面宽度？

上面的示例图片。

Answer 1

只需将overflow-x: hidden 放在类的父级中。

body {
  overflow-x: hidden;
}

div {
  font-size: 150px;
  white-space: nowrap;
  animation: animation-name 5s infinite;
  animation-timing-function: linear;
}

@keyframes animation-name {
  0% {
    transform: translateX(5%)
  }
  100% {
    transform: translateX(-100%)
  }
}

<div>
  Some pretty large letters
</div>