Css Edge Animation Issue

Question

Every browser works fine apart from Microsoft edge, the animation will only start working if I view the element in edges development window, untick the style for the animation then reapply it ?

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

Its really driving me nuts

Thanks

Answer 1

Weirdly IE and Edge need you to state the 0 in the same units as the 100% so you need to use 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>