Css Edge动画问题

Question

除了Microsoft边缘之外，每个浏览器都能正常工作，如果我在边缘开发窗口中查看元素，动画将只开始工作，取消动画的样式然后重新应用它？

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

它真的让我疯狂

谢谢

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>

Answer 2

刚才有一个类似的问题，但对我而言，在解开盒子并打勾时它不起作用。基本上不得不向css添加属性

background-origin: border-box;

希望这有助于其他有类似问题的人。

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