CSS Анимация в Internet Explorer

Question

Следующий код отображает анимированный «пульсирующий» круг CSS.

Работает во всех браузерах, но не в Internet Explorer.

Как я могу заставить его работать в 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

Может быть, этот сайт может помочь вам: http://caniuse.com/ есть страница специально отведенной для комплексного метода анимировать определенные свойства элемента: http://caniuse.com/#feat=css-animation

Answer 2

С помощью предыдущих ответов Я решил это (спасибо)

Мне нужно было добавить «современные» ключевые кадры без префикса. Это работает в 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; 
} 
}