这可能是一个愚蠢的问题（还没有完成JS / HTML）。我希望这个动画一直很流畅，但出于某种原因，它会在中间停留很短的时间然后恢复。添加更多步骤以尝试平滑过渡似乎只是暂停更长时间。有没有解决这个问题？
#under {
color: black;
font-size: 28px;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes example {
0% {
transform: translateX(-330px);
}
50% {
transform: scaleX(3);
}
100% {
transform: translateX(330px);
}
}<body>
<div id="under">
<p> - </p>
</div>
</body>为了保持均匀移动，您需要在scaleX和0%定义100%值。另外，我将你的计时功能从ease-in-out更改为linear。在50%，translateX已经在0，因为你定义了开始和结束值。为了保持一致性，我在0添加了50%值。
#under {
background-color: #000;
color: white;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 100px;
height: 50px;
}
@keyframes example {
0% {
transform: scaleX(1) translateX(-330px);
}
50% {
transform: scaleX(3) translateX(0);
}
100% {
transform: scaleX(1) translateX(330px);
}
}<div id="under"></div>