CSS animation not working in IE(Internet Explore) 10/11 - css

Question

I need to create a animation that will make the dots jump one by one with delay.
How can this thing work in IE? (chrome working)
working not correct, when i press [F5]key they are working.
i don't understand why it doesn't.
test page here!
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('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>