CSS animation in MS Edge and IE animates in wrong direction - css

Question

I have created a simple css animation that translates an pseudo element vertically. This animation works great in Chrome, FireFox and Safari but not so much in Microsoft Edge or Internet Explorer.
I am struggling to figure out the reason for this bug. Any help would be great!
How the animation should look:
How it looks in Edge and IE:
Animation example: https://jsfiddle.net/9x5vckhb/
#keyframes scroll {
0% {
transform: translate(-50%, 20%);
opacity: 0;
},
30% {
opacity: 1;
},
40% {
opacity: 1;
},
70% {
transform: translate(-50%, 120%);
opacity: 0;
},
100% {
transform: translate(-50%, 120%);
opacity: 0;
}
}

Answer 1

I am wondering if this is a bug or not. I for the life could not wrap my head around this. It seemed like the x & y were being swapped after the first animation loop. Switched to transform3d() and it worked perfectly.
Fiddle
&:before {
content: '•';
font-size: round($width/100*63.3);
top: 0;
transform: translate3d(-50%, 30%, 0);
animation: scroll ease 3s;
animation-iteration-count: infinite;
}
And
#keyframes scroll {
0% {
transform: translate3d(-50%, 20%, 0);
opacity: 0;
},
30% {
opacity: 1;
},
40% {
opacity: 1;
},
70% {
transform: translate3d(-50%, 120%, 0);
opacity: 0;
},
100% {
transform: translate3d(-50%, 120%, 0);
opacity: 0;
}
}