html - 仅右侧的 css3 动画延迟

Question

我正在创建 CSS3 动画，使 div 从左向右无限移动。

除了当 div 移到右侧时，代码正常运行，它有 3 秒的延迟。在左侧，它运行良好。

这是我的代码:

#najava {
  width: 197px;
  height: 22px;
  border-radius: 2px;
  background-color: transparent;
  opacity: 0.8;
  font-weight: bold;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  animation: mymove 5s linear 0s infinite alternate-reverse;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
}
@keyframes mymove {
  0% {
    left: 0px;
  }
  100% {
    left: 200px;
  }
}
@keyframes mymove {
  0% {
    background-color: transparent;
    left: 0px;
    right: 0px;
  }
  33% {
    background-color: yellow;
    left: 250px;
    right: 0px;
  }
  66% {
    background-color: blue;
    left: 250px;
    right: 250px;
  }
  100% {
    background-color: green;
    left: 0px;
    right: 250px;
  }
}

<div id="najava">
  <p>text text text text text</p>
</div>

Answer 1

这是发生这种情况的原因。

您的问题在于，在 66% 时，什么也没有发生。 left 保持在 250px 这使得它只是停留在原处。动画按程序运行。

要修复这种不需要的行为，您需要删除 66% 行并将其更改为简单的 0%、50%、100% 动画。

@keyframes mymove {
    0%   {background-color:transparent; left:0px; right:0px;}
    50%  {background-color:yellow; left:250px; right:0px;}
    100%  {background-color:green; left:0px; right:250px;}
}    

此更改确保 div 在 50% 时位于右侧，而在 100%/0% 时它一直在左侧。