title: CSS animation does not work in IE and Edge
body: <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>