html - 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>