css 动画小白-space: nowrap;

Question

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

我有一些非常大的字母，所以我正在做

white-space: nowrap;

所以文本不会转到另一行。

我用

可以很好地滚动动画

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

我把

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

在class

我唯一的问题是大字母和白色-space: nowrap 导致页面宽度增加，因为字母推动了页面宽度。有没有办法让动画仍然滚动但不会增加页面宽度？

上面的示例图片。

Answer 1

只需将 overflow-x: hidden 放入 class 的父项中即可。

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>

css 动画小白-space: nowrap;

css animation white-space: nowrap;

html

css

keyframe

css-animations