如何从溢出 css animation 中消除抖动？

Question

我目前正在做一个 React 应用程序，它显示我当时正在听什么音乐。 显然，有些歌曲名称、专辑名称等比其他名称要长，所以我想用 animation 显示溢出的部分。 我设法做到了，这还不错。 较长的文本滚动效果很好，但我的问题是它也会为短文本设置动画，并且在 animation 期间会导致它们出现一些抖动。

任何想法如何消除这种震动？ 还赞赏基于 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 而不是左右

 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>