CSS 关键帧动画在中间暂停然后再次恢复？

Question

这可能是个愚蠢的问题（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>

Answer 1

为了保持平稳移动，您需要在 0% 和 100% 处定义 scaleX 值。另外，我把你的计时功能从ease-in-out改成了linear。在 50%，translateX 已经在 0，因为您定义了起始值和结束值。为了保持一致性，我在 50%.

处添加了 0 值

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

CSS 关键帧动画在中间暂停然后再次恢复？

CSS keyframe animation is pausing in middle then resuming again?

css

keyframe

css-animations