CSS animation not working in IE11 and Edge - css

Question

I have tried putting my keyframes at the top of my CSS, not in the media query, http-equiv set to IE=Edge, etc.
It's a fairly basic .png image used during website load with simple rotate/y animation shown in this fiddle code below.
.loader-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999999;
background-color: #eef0eb;
}
.loader {
position: absolute;
height: 50px;
width: auto;
top: calc(50% - 25px);
left: calc(50% - 25px);
-webkit-animation-name: loader-animate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-name: loader-animate;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#-webkit-keyframes loader-animate {
25% {
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);
}
50% {
-webkit-transform: rotatex(360deg);
transform: rotatex(360deg);
}
75% {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}
100% {
-webkit-transform: rotatex(0deg);
transform: rotatex(0deg);
}
}
#keyframes loader-animate {
25% {
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);
}
50% {
-webkit-transform: rotatex(360deg);
transform: rotatex(360deg);
}
75% {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}
100% {
-webkit-transform: rotatex(0deg);
transform: rotatex(0deg);
}
}
<div class="loader-background">
<img src="https://s30.postimg.org/7dct7bspd/GTG_FB_Logo.png" class="loader"/>
</div>
Works perfectly in Chrome and FF but not in Edge and IE11.

Answer 1

simply use rotate(..)
Animation will be a little different, but it will work

Answer 2

OK, so I figured it myself. You need to set the x and y rotation in every stage definition of the keyframe. Chrome obviously does better at filling in the blanks... revised fiddle
#-webkit-keyframes loader-animate {
0% {
-webkit-transform: rotatex(0deg) rotatey(0deg);
transform: rotatex(0deg) rotatey(0deg);
}
25% {
-webkit-transform: rotatex(0deg) rotatey(360deg);
transform: rotatex(0deg) rotatey(360deg);
}
50% {
-webkit-transform: rotatex(360deg) rotatey(360deg);
transform: rotatex(360deg) rotatey(360deg);
}
75% {
-webkit-transform: rotatex(360deg) rotatey(0deg);
transform: rotatex(360deg) rotatey(0deg);
}
100% {
-webkit-transform: rotatex(0deg) rotatey(0deg);
transform: rotatex(0deg) rotatey(0deg);
}
}
#keyframes loader-animate {
0% {
-webkit-transform: rotatex(0deg) rotatey(0deg);
transform: rotatex(0deg) rotatey(0deg);
}
25% {
-webkit-transform: rotatex(0deg) rotatey(360deg);
transform: rotatex(0deg) rotatey(360deg);
}
50% {
-webkit-transform: rotatex(360deg) rotatey(360deg);
transform: rotatex(360deg) rotatey(360deg);
}
75% {
-webkit-transform: rotatex(360deg) rotatey(0deg);
transform: rotatex(360deg) rotatey(0deg);
}
100% {
-webkit-transform: rotatex(0deg) rotatey(0deg);
transform: rotatex(0deg) rotatey(0deg);
}
}