CSS Animation not working in Edge - html

Question

I have this div with two spans inside, I made loader which has circle filling with red color, over and over again. Everything is working great in Chrome but on EGDE this circle is so buggy that makes no sense.
When I inspect it on EDGE I get everything stricken through for a span, transform, animation... But when I check it on Can I use, it says that every browser is compatible. Is there any prefix or anything that can fix this problem on edge. I tried to put compatibility meta tag in HEAD, doesn't work.
HTML
<section>
<div><span></span><span></span></div>
</section>
CSS
#-webkit-keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#-webkit-keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#-webkit-keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
#keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 8em;
width: 8em;
background-color: rgba(211,211,211,0.7);
border-radius: 50%;
}
.gray-circle{
background: gray;
width: 8em;
height: 8em;
display: flex;
align-items
}
div {
width: 3em;
height: 3em;
position: relative;
border-radius: 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-animation: flip 3s infinite;
animation: flip 3s infinite;
}
div span {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: #fff;
}
div span:before {
content: '';
z-index: -1;
position: absolute;
background: #fd395b;
top: -50%;
bottom: -50%;
width: 400%;
}
div span:nth-of-type(1) {
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
left: 50%;
right: 0;
}
div span:nth-of-type(1):before {
right: 0;
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
}
div span:nth-of-type(2) {
border-top-left-radius: 5em;
border-bottom-left-radius: 5em;
right: 50%;
left: 0;
}
div span:nth-of-type(2):before {
right: 50%;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
}
Codepen

Answer 1

Unfortunately certain webkit functions do not currently work on Edge. You can submit a feature request here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer
Although certain webkit functions have supposedly been in development since 2016 and still have yet to be properly implemented into the browser.