CSS动画在IE 10/11中不起作用

Question

我需要创建一个动画，使点延迟一跳一跳。 这件事在IE中如何运作？ （可用于Chrome浏览器）
工作不正确，当我按[F5]键时它们正在工作。
我不明白为什么不这么做。

测试页面在这里！
https://codepen.io/cailan/pen/GBxzPP

.txt{margin-top:50px}
.txt em{font-style:normal;font-size:50px;letter-spacing:5px;}
.txt em span {
  display:inline-block;background:url('http://hsr02.woobi.co.kr/bg_dot.png') no-repeat center 3px;
  padding-top:10px;font-weight:800;
  animation-fill-mode: backwards;-webkit-animation-fill-mode: backwards;
}
.txt em span:nth-child(1) {
  animation: dot 1.2s ease-in-out infinite alternate;
  -webkit-animation:dot 1.2s ease-in-out infinite alternate;
  -ms-animation: dot 1.2s ease-in-out infinite alternate;
}
.txt em span:nth-child(2) { 
  animation: dot 1.2s ease-in-out 0.2s infinite alternate;
  -webkit-animation:dot 1.2s ease-in-out 0.2s infinite alternate;
  -ms-animation: dot 1.2s ease-in-out 0.2s infinite alternate;
}
.txt em span:nth-child(3) {
  animation: dot 1.2s ease-in-out 0.4s infinite alternate;
  -webkit-animation:dot 1.2s ease-in-out 0.4s infinite alternate;
  -ms-animation: dot 1.2s ease-in-out 0.4s infinite alternate;
}
.txt em span:nth-child(4) {
  animation: dot 1.2s ease-in-out 0.6s infinite alternate;
  -webkit-animation:dot 1.2s ease-in-out 0.6s infinite alternate;
  -ms-animation: dot 1.2s ease-in-out 0.6s infinite alternate;
}
.txt em span:nth-child(5) {
    animation: dot 1.2s ease-in-out 0.8s infinite alternate;
    -webkit-animation:dot 1.2s ease-in-out 0.8s infinite alternate;
    -ms-animation: dot 1.2s ease-in-out 0.8s infinite alternate;
    }

@-webkit-keyframes dot { 
  0% { background-position:center 6px;}
  42% { background-position:center top;}
  45% { background-position:center 3px;}
  100% { background-position:center 3px;}
}
@-ms-keyframes dot {
  0% { background-position:center 6px;}
  42% { background-position:center top;}
  45% { background-position:center 3px;}
  100% { background-position:center 3px;}
 }
@-o-keyframes dot {
  0% { background-position:center 6px;}
  42% { background-position:center top;}
  45% { background-position:center 3px;}
  100% { background-position:center 3px;}
}
@keyframes dot {
  0% { background-position:center 6px;}
  42% { background-position:center top;}
  45% { background-position:center 3px;}
  100% { background-position:center 3px;}
}

<div class="txt">
  <em><span>H</span><span>E</span><span>L</span><span>L</span><span>O</span>!</em>
</div>