CSS边缘动画问题

Question

除了 Microsoft Edge 浏览器外，其他浏览器都可以正常工作。如果我在 Edge 的开发窗口中查看元素，并取消动画样式，然后重新应用它，动画才会开始工作。

@keyframes animatedBackground {
from {background-position: 100% 0;}
to {background-position: 0 0;}
}

#animate-area {
width: 100%;
height: 600px;
position: absolute;
left: 0px;
top: 0px;
z-index: 9;
background-image: url(/images/clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 90s linear infinite;
}

这真的让我很烦恼。

谢谢。

- Simon Gersh

---

嗨，Simon，请你创建一个 [MCVE]，这样我们就可以自己尝试一下看看出了什么问题，谢谢。 - Pete

Fiddle https://jsfiddle.net/Lcqfjoeu/2/ - Simon Gersh

抱歉，无法提供翻译。这是一个网址链接，需要更多上下文才能进行翻译。 - Simon Gersh

Answer 1

有趣的是，IE和Edge需要您在与100％相同的单位中指定0，因此您需要使用0％：

@keyframes animatedBackground {
  from {
    background-position: 100% 0px;
  }
  to {
    background-position: 0% 0px;
  }
}

#animate-area {
  width: 100%;
  height: 600px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 9;
  background-image: url("https://via.placeholder.com/600x150/");
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite;
}

<div id="animate-area"></div>

- Pete

---

不客气，请您接受答案，这样大家就知道问题已经关闭了（在答案左上方的投票按钮下面点击勾号）。谢谢。 - Pete

这个答案终于给了我需要的解决方案。值得注意的是，在Edge开发工具中，问题表现得非常奇怪--如果你在开发工具中悬停在元素上，可以看到轮廓线（或某个版本）在屏幕上移动，但无法看到元素本身。这种行为让我错误地认为我正在查看某种z-index问题，并浪费了很多调查时间。很高兴我找到了这个解决方案。谢谢！ - Alexander Nied

Answer 2

刚刚遇到了类似的问题，但是对我来说，取消勾选并重新勾选该框并没有起作用。基本上必须在CSS中添加一个属性

background-origin: border-box;

希望这能帮助其他遇到类似问题的人。

- Oz Lodriguez

Answer 3

@-o-keyframes animatedBackground {
from {background-position: 100% 0;}
to {background-position: 0 0;}
}

@-moz-keyframes animatedBackground {
from {background-position: 100% 0;}
to {background-position: 0 0;}
}

@-webkit-keyframes animatedBackground {
from {background-position: 100% 0;}
to {background-position: 0 0;}
}

@keyframes animatedBackground {
from {background-position: 100% 0;}
to {background-position: 0 0;}
}

#animate-area {
width: 100%;
height: 600px;
position: absolute;
left: 0px;
top: 0px;
z-index: 9;
background-image: url(/images/clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 90s linear infinite;
}

- Rifat

---

好的，添加了新的关键帧，但结果还是一样的 :( - Simon Gersh

请问您能否提供实时网址？ - Rifat