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％：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Css Edge动画问题

3 个答案: