CSS Animation in Internet Explorer - css

Question

The following code will display a CSS animated 'pulsing' circle.
In works in all browsers but not in Internet explorer.
How can I make it work in Internet Explorer?
Codepen: http://codepen.io/danest/pen/GxfqB/
#container {
margin-top: 20px;
margin-left: 30px;
position: relative;
background: #45453f;
}
.pulse {
width: 10px;
height: 10px;
border: 5px solid #f7f14c;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #716f42;
z-index: 10;
position: absolute;
}
.dot {
border: 10px solid #fff601;
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 50px;
width: 50px;
-webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out;
animation: pulse 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -25px;
left: -25px;
z-index: 1;
opacity: 0;
}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}

Answer 1

Maybe this site can help you : http://caniuse.com/
there is a page dedicate for complex method of animating certain properties of an element : http://caniuse.com/#feat=css-animation

Answer 2

With the help of previous answers I solved this (Thank you)
I needed to add the 'modern' keyframes without prefix. This works in IE 10
#keyframes pulse {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.7;
}
100% {
transform: scale(1.2);
opacity: 0.0;
}
}