如何消除溢出 css 动画中的抖动？

Question

我目前正在开发一个 React 应用程序，它可以显示当时我正在听的音乐。显然有些歌名，专辑名等比其他的长，所以我想用动画来展示溢出的部分。我设法做到了这一点，还可以。较长的文本可以很好地滚动，但我的问题是它也会为较短的文本设置动画，这会导致它们在动画过程中有些晃动。

有什么办法可以消除抖动吗？基于 Javascript 的解决方案也很受欢迎，但这似乎是更短的解决方案。

div {
  width: 100px;
  border: 1px solid black;
}

div p {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  min-width: 100%;
  
  animation: 5s linear 0s infinite alternate scrolltext;
}

@keyframes scrolltext {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

<div>
  <p>This is a very long text and rolls nicely</p>
  <p>And these</p>
  <p>two shaking?!</p>
</div>

Answer 1

使用 margin-left 和 margin-right 而不是 left 和 right

div {
  width: 100px;
  border: 1px solid black;
}

div p {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  min-width: 100%;
  
  animation: 5s linear 0s infinite alternate scrolltext;
}

@keyframes scrolltext {
  0%,
  25% {
    transform: translateX(0%);
    margin-left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    margin-left: 100%;
  }
}

<div>
  <p>This is a very long text and rolls nicely</p>
  <p>And these</p>
  <p>two shaking?!</p>
</div>

如何消除溢出 css 动画中的抖动？

How to remove shaking from overflow css animation?

javascript

css

css-animations