CSS error in other browsers - html

Question

I use the CSS code from here for my website loader. I am having problem with IE and Mozilla everything doesn't look and work the way is supposed to.
In IE there's not animation and the graphics break, and in Mozilla is not animation and the graphics doesn't look right as well.
#bg: #2c3e50;
/*.triangle(#triangle: border-left: 60px solid transparent;
border-right: solid transparent;
border-top: 0 solid transparent;);*/
body{
background: #bg;
}
.loader {
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 40%;
left: 0;
right: 0;
height: 50px;
width: 50px;
}
.tri {
animation: translateRotation 1.5s infinite reverse;
-webkit-animation: translateRotation 1.5s infinite reverse;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 0 solid transparent;
border-bottom: 60px solid #00b4ff;
width: 0px;
z-index: 2;
}
.tri2 {
animation: translateRotation 1.5s infinite;
-webkit-animation: translateRotation 1.5s infinite;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 0px solid transparent;
border-bottom: 40px solid #ffde15;
width: 0px;
z-index: 1;
}
.tri3 {
animation: translateRotation 1.5s infinite;
-webkit-animation: translateRotation 1.5s infinite;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #1da158;
border-bottom: 0px solid transparent;
width: 0px;
z-index: 1;
}
.tri4 {
animation: translateRotation 1.5s infinite reverse;
-webkit-animation: translateRotation 1.5s infinite reverse;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea343f;
border-bottom: 0px solid transparent;
width: 0px;
z-index: 2;
}
.circ {
border: 30px solid rgba(255,255,255,0.1);
}
.circ2 {
border: 25px solid rgba(255,255,255,1);
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0, 0.15), 0 -2px 1px rgba(0,0,0, 0.15), -2px 0 1px rgba(0,0,0, 0.15), 2px 0 1px rgba(0,0,0, 0.15);
margin-top: 30px;
z-index: 90;
}
/* ANIMATE */
#-webkit-keyframes translateRotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);}
}

Answer 1

The problem is that you are using only #-webkit-keyframes instead of #keyframes and -webkit-transform instead of transform which are supported without prefixes since IE10+
You should add this code above your animation keyframe and should work on IE10+:
#keyframes translateRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
Check here keyframe-animation-syntax to see all the prefixes.
For IE9 you probably should use Javascript animations like jQuery/jQueryUI, you can check if is necessary to use using Modernizr
if(!Modernizr.cssanimations) {
// Fallback
}