CSS KeyFrame Animation在中间暂停，然后再次恢复

这可能是一个愚蠢的问题（在一点点没有完成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>

要使事情保持均匀，您需要在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>

相关内容

最新更新

热门标签：