CSS animation does not work in IE and Edge
<p>I have the following CSS code, it is a nice sonar effect applied to an element on hover. It works fine in Firefox, Opera and Chrome
but I cannot make it work in IE(10+) and Edge too.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-color: #cccccc;
}
.text {
  position: realtive;
  display: block;
  width: 85px;
  margin: 150px auto 0px;
  background-color: #;
}
.content {
  display: block;
  position: relative;
  height: 100px;
  width: 100px;
  border: 2px solid white;
  border-radius: 100%;
  margin: 20px auto;  
}
.icon {
  display: block;
  height: 100px;
  width: 100px;
  background-color: red;
}
.whiteSonarEffect .icon {
   border-radius: 100%;
   position: relative;
}
.whiteSonarEffect .icon:after {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 100%;
   content:'';
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   top: 0;
   left: 0;
}
.whiteSonarEffect .icon:hover {
   color: #fff;
}
.whiteSonarEffect .content:hover .icon:after {
   -webkit-animation: whiteSonarEffect 1.3s ease-out 75ms;
   -moz-animation: whiteSonarEffect 1.3s ease-out 75ms;
   -o-animation: whiteSonarEffect 1.3s ease-out 75ms;
   animation: whiteSonarEffect 1.3s ease-out 75ms;
}
@-webkit-keyframes whiteSonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
       -webkit-transform: scale(1.5);
       opacity: 0;
   }
}
@-moz-keyframes whiteSonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
       -moz-transform: scale(1.5);
       opacity: 0;
   }
}
@-o-keyframes whiteSonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
       -o-transform: scale(1.5);
       opacity: 0;
   }
}
@keyframes whiteSonarEffect {
   0% {
       opacity: 0.3;
   }
   40% {
       opacity: 0.5;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }
   100% {
       box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
       transform: scale(1.5);
       opacity: 0;
   }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="whiteSonarEffect"&gt;
  &lt;div class="text"&gt;&lt;h3&gt;Hover Me&lt;/h3&gt;&lt;/div&gt;
 &lt;div class="content"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>You can view it on CodePen: <a href="http://codepen.io/ivanchi/pen/YWNjVN" rel="nofollow">http://codepen.io/ivanchi/pen/YWNjVN</a>
Would be grateful for any suggestions.</p>