Question

我正在创建CSS3动画，使div从左到右移动无穷大。

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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;}
}

这种改变确保在50％时，div在右边，在100％/ 0％时，它一直向左。

Answer 2

稍微改变你的CSS

<强> CSS ：

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

完整的工作代码：

#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%   {background-color:transparent; left:0px}
    33%  {background-color:yellow; left:250px}
    66%  {background-color:blue; left:0px; right:250px;}
    100%  {background-color:green; left:250px;}
}

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

以下是工作 Demo

Answer 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 3s 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; }
    25%  {background-color:yellow; left:100px; }
    50%  {background-color:blue; left:200px; }
    75%  {background-color:red; left:100px; }
    100%  {background-color:green; left:0px;}
}

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

P.S。添加了5个步骤，但您可以使用值...

仅限右侧的css3动画延迟

3 个答案: