title: Text transition animation effect issue in IE
body: <p>The below code display animated text in most browsers, except IE where It runs but you don't see it. Could I have some guidance on how to solve this?</p>
  
  <p>Please refer to this link to see the example > <a href="http://jsfiddle.net/pherrera/posvken7/" rel="nofollow">http://jsfiddle.net/pherrera/posvken7/</a></p>
  
  <p>and here is the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div id="background" class="card"&gt;
          &lt;div class="sp-container"&gt;
              &lt;div class="sp-content"&gt;
                  &lt;div class="sp-globe"&gt;&lt;/div&gt;
                  &lt;h3 class="frame-1"&gt;message 1&lt;/h3&gt;
                  &lt;h3 class="frame-2"&gt;message 2&lt;/h3&gt;
                  &lt;h3 class="frame-3"&gt;message 3&lt;/h3&gt;
                  &lt;h3 class="frame-4"&gt;Now!&lt;/h2&gt;
                  &lt;h3 class="frame-5"&gt;
                      &lt;span&gt;this&lt;/span&gt; &lt;span&gt;is&lt;/span&gt; &lt;span&gt;a message&lt;/span&gt;
                  &lt;/h3&gt;
                  &lt;a class="sp-circle-link" href="#"&gt;again!&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>body, html {
      background-color: #282828;
      display: table;
      height: 100%;
      width: 100%;
  }
  
  .container {
      display: table-cell;
      vertical-align: middle;
  }
  
  .card {
      border-radius: 2px 2px 2px 2px;
      -moz-border-radius: 2px 2px 2px 2px;
      -webkit-border-radius: 2px 2px 2px 2px;
      border: 0px none;
      -webkit-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
      -moz-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
      box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
  }
  
  #background {
      width: 600px;
      height: 500px;
      margin: 0 auto;
      background: rgba(92, 92, 92, 1);
      background: -moz-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(92, 92, 92, 1)), color-stop(100%, rgba(59, 59, 59, 1)));
      background: -webkit-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
      background: -o-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
      background: -ms-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
      background: radial-gradient(ellipse at center, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#3b3b3b', GradientType=1);
  }
  
  a {
      text-decoration: none;
  }
  
  h1.main, p.demos {
      -webkit-animation-delay: 18s;
      -moz-animation-delay: 18s;
      -ms-animation-delay: 18s;
      animation-delay: 18s;
  }
  
  .sp-container {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 0;
      background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
      background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
      background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
      background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  }
  
  .sp-content {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      z-index: 1000;
  }
  
  .sp-container h3 {
      position: absolute;
      top: 50%;
      line-height: 100px;
      height: 90px;
      margin-top: -50px;
      font-size: 60px;
      width: 100%;
      text-align: center;
      color: transparent;
      -webkit-animation: blurFadeInOut 3s ease-in backwards;
      -moz-animation: blurFadeInOut 3s ease-in backwards;
      -ms-animation: blurFadeInOut 3s ease-in backwards;
      animation: blurFadeInOut 3s ease-in backwards;
  }
  
  .sp-container h3.frame-1 {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      -ms-animation-delay: 0s;
      animation-delay: 0s;
  }
  
  .sp-container h3.frame-2 {
      -webkit-animation-delay: 3s;
      -moz-animation-delay: 3s;
      -ms-animation-delay: 3s;
      animation-delay: 3s;
  }
  
  .sp-container h3.frame-3 {
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -ms-animation-delay: 6s;
      animation-delay: 6s;
  }
  
  .sp-container h3.frame-4 {
      font-size: 200px;
      -webkit-animation-delay: 9s;
      -moz-animation-delay: 9s;
      -ms-animation-delay: 9s;
      animation-delay: 9s;
  }
  
  .sp-container h3.frame-5 {
      -webkit-animation: none;
      -moz-animation: none;
      -ms-animation: none;
      animation: none;
      color: transparent;
      text-shadow: 0px 0px 1px #fff;
  }
  
  .sp-container h3.frame-5 span {
      -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
      -moz-animation: blurFadeIn 1s ease-in 12s backwards;
      -ms-animation: blurFadeIn 3s ease-in 12s backwards;
      animation: blurFadeIn 3s ease-in 12s backwards;
      color: transparent;
      text-shadow: 0px 0px 1px #fff;
  }
  
  .sp-container h3.frame-5 span:nth-child(2) {
      -webkit-animation-delay: 13s;
      -moz-animation-delay: 13s;
      -ms-animation-delay: 13s;
      animation-delay: 13s;
  }
  
  .sp-container h3.frame-5 span:nth-child(3) {
      -webkit-animation-delay: 14s;
      -moz-animation-delay: 14s;
      -ms-animation-delay: 14s;
      animation-delay: 14s;
  }
  
  .sp-globe {
      position: absolute;
      width: 282px;
      height: 273px;
      left: 50%;
      top: 50%;
      margin: -137px 0 0 -141px;
      -webkit-animation: fadeInBack 3.6s linear 14s backwards;
      -moz-animation: fadeInBack 3.6s linear 14s backwards;
      -ms-animation: fadeInBack 3.6s linear 14s backwards;
      animation: fadeInBack 3.6s linear 14s backwards;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
      filter: alpha(opacity=30);
      opacity: 0.3;
      -webkit-transform: scale(5);
      -moz-transform: scale(5);
      -o-transform: scale(5);
      -ms-transform: scale(5);
      transform: scale(5);
  }
  
  .sp-circle-link {
      position: absolute;
      left: 50%;
      bottom: 100px;
      margin-left: -50px;
      text-align: center;
      line-height: 100px;
      width: 100px;
      height: 100px;
      background: #fff;
      color: #3f1616;
      font-size: 25px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -webkit-animation: fadeInRotate 1s linear 16s backwards;
      -moz-animation: fadeInRotate 1s linear 16s backwards;
      -ms-animation: fadeInRotate 1s linear 16s backwards;
      animation: fadeInRotate 1s linear 16s backwards;
      -webkit-transform: scale(1) rotate(0deg);
      -moz-transform: scale(1) rotate(0deg);
      -o-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
  }
  
  .sp-circle-link:hover {
      background: #85373b;
      color: #fff;
  }
  /**/
  @-webkit-keyframes blurFadeInOut {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -webkit-transform: scale(1.3);
      }
  
      20%, 75% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -webkit-transform: scale(1);
      }
  
      100% {
          opacity: 0;
          text-shadow: 0px 0px 50px #fff;
          -webkit-transform: scale(0);
      }
  }
  
  @-webkit-keyframes blurFadeIn {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -webkit-transform: scale(1.3);
      }
  
      50% {
          opacity: 0.5;
          text-shadow: 0px 0px 10px #fff;
          -webkit-transform: scale(1.1);
      }
  
      100% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -webkit-transform: scale(1);
      }
  }
  
  @-webkit-keyframes fadeInBack {
      0% {
          opacity: 0;
          -webkit-transform: scale(0);
      }
  
      50% {
          opacity: 0.4;
          -webkit-transform: scale(2);
      }
  
      100% {
          opacity: 0.2;
          -webkit-transform: scale(5);
      }
  }
  
  @-webkit-keyframes fadeInRotate {
      0% {
          opacity: 0;
          -webkit-transform: scale(0) rotate(360deg);
      }
  
      100% {
          opacity: 1;
          -webkit-transform: scale(1) rotate(0deg);
      }
  }
  /**/
  @-moz-keyframes blurFadeInOut {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -moz-transform: scale(1.3);
      }
  
      20%, 75% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -moz-transform: scale(1);
      }
  
      100% {
          opacity: 0;
          text-shadow: 0px 0px 50px #fff;
          -moz-transform: scale(0);
      }
  }
  
  @-moz-keyframes blurFadeIn {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -moz-transform: scale(1.3);
      }
  
      100% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -moz-transform: scale(1);
      }
  }
  
  @-moz-keyframes fadeInBack {
      0% {
          opacity: 0;
          -moz-transform: scale(0);
      }
  
      50% {
          opacity: 0.4;
          -moz-transform: scale(2);
      }
  
      100% {
          opacity: 0.2;
          -moz-transform: scale(5);
      }
  }
  
  @-moz-keyframes fadeInRotate {
      0% {
          opacity: 0;
          -moz-transform: scale(0) rotate(360deg);
      }
  
      100% {
          opacity: 1;
          -moz-transform: scale(1) rotate(0deg);
      }
  }
  /**/
  @keyframes blurFadeInOut {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          transform: scale(1.3);
      }
  
      20%, 75% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          transform: scale(1);
      }
  
      100% {
          opacity: 0;
          text-shadow: 0px 0px 50px #fff;
          transform: scale(0);
      }
  }
  
  @keyframes blurFadeIn {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          transform: scale(1.3);
      }
  
      50% {
          opacity: 0.5;
          text-shadow: 0px 0px 10px #fff;
          transform: scale(1.1);
      }
  
      100% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          transform: scale(1);
      }
  }
  
  @keyframes fadeInBack {
      0% {
          opacity: 0;
          transform: scale(0);
      }
  
      50% {
          opacity: 0.4;
          transform: scale(2);
      }
  
      100% {
          opacity: 0.2;
          transform: scale(5);
      }
  }
  
  @keyframes fadeInRotate {
      0% {
          opacity: 0;
          transform: scale(0) rotate(360deg);
      }
  
      100% {
          opacity: 1;
          transform: scale(1) rotate(0deg);
      }
  }
  </code></pre>