Css Edge动画问题

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> 

Answer 2

Had a similar issue just now, but for me it did not work when unticking and ticking the box. Basically had to add a property to the css

background-origin: border-box;

Hopefully this helps others whom are having a similar issue.

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