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

要保持事物平稳运行，您需要在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>

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

1 个答案: