CSS animation on IE does not work

Question

I have a scrolling text banner using html & css, it works on Firefox & Chrome, but goes wrong in IE 11, when it reaches the end of the 3rd items animation, the texts reappear in the centre and scroll the wrong way.

The text should appear one item at a time from the righ seperately, scroll to the centre, wait a while, then scroll off to the left, then the next item should appear. After the last item, the animation should repeat.

@-webkit-keyframes left-one {
  0% {
    -webkit-transform: translateX(100%);
  }
  5%,28% {
    -webkit-transform: translateX(0);
  }
  33%,100% {
    -webkit-transform: translateX(-100%);
  }
}
@-webkit-keyframes left-two {
  0%,33% {
    -webkit-transform: translateX(100%);
  }
  38%,61% {
    -webkit-transform: translateX(0);
  }
  66%,100% {
    -webkit-transform: translateX(-100%);
  }
}
@-webkit-keyframes left-three {
  0%,66% {
    -webkit-transform: translateX(100%);
  }
  71%,95% {
    -webkit-transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
/** Webkit Keyframes **/

@keyframes left-one {
  0% {
    transform: translateX(100%);
  }
  5%,28% {
    transform: translateX(0);
  }
  33%,100% {
    transform: translateX(-100%);
  }
}
@keyframes left-two {
  0%,33% {
    transform: translateX(100%);
  }
  38%,61% {
    transform: translateX(0);
  }
  66%,100% {
    transform: translateX(-100%);
  }
}
@keyframes left-three {
  0%,66% {
    transform: translateX(100%);
  }
  71%,95% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee {
  width: 100%;
  height: 30px;
  margin: 0 auto;
  margin-top: 1px;
  margin-bottom: 2px;
  overflow: hidden;
  position: relative;
  background-color: #222;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: background-color 350ms;
  -moz-transition: background-color 350ms;
  -o-transition: background-color 350ms;
  -ms-transition: background-color 350ms;
  transition: background-color 350ms;
  background: -webkit-linear-gradient(left, rgba(32, 32, 32, 0), rgba(32, 32, 320, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
  /*Safari 5.1-6*/
  background: -o-linear-gradient(right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
  /*Opera 11.1-12*/
  background: -moz-linear-gradient(right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
  /*Fx 3.6-15*/
  background: -ms-linear-gradient(right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
  /*IE*/
  background: linear-gradient(to right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
  /*Standard*/
}
.marquee p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 28px;
  text-align: center;
  color: #FCCC0C;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  text-shadow: 0px 0px 1px #FCCC0C;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
.marquee p:nth-child(1) {
  animation: left-one 15s ease infinite;
  -webkit-animation: left-one 15s ease infinite;
}
.marquee p:nth-child(2) {
  animation: left-two 15s ease infinite;
  -webkit-animation: left-two 15s ease infinite;
}
.marquee p:nth-child(3) {
  animation: left-three 15s ease infinite;
  -webkit-animation: left-three 15s ease infinite;
}

<div class="marquee">
  <p><a>1. Text to scroll item.</a>
  </p>
  <p><a>2  Second scroll text,</a>
  </p>
  <p><a>3  Final text item for scrolling,</a>
  </p>
</div>

Answer 1

I think the problem has something to do with your keyframes at 0% and IE doing something funny about where it starts the animation. I mean when you watch your codepen it looks like the text is drifting out to the right at the second keyframe instead of at 0%.

Anyway, here is some code that fixes that.

Solution 1: Change your 0% to 0.001% and that will fix it.

Solution 2: Perhaps better is to just write one animation and add a delay on each bit of text. Here is a codepen for it

@-webkit-keyframes left-one {
  0% {
    -webkit-transform: translateX(100%);
  }
  20%,33% {
    -webkit-transform: translateX(0);
  }
  50%,100% {
    -webkit-transform: translateX(-100%);
  }
}

/** Webkit Keyframes **/

@keyframes left-one {
  0% {
    transform: translateX(100%);
  }
  20%,33% {
    transform: translateX(0);
  }
  50%,100% {
    transform: translateX(-100%);
  }
}

.marquee p:nth-child(1) {
  animation: left-one 15s ease  infinite;
  -webkit-animation: left-one 15s ease infinite;
}
.marquee p:nth-child(2) {
  animation: left-one 15s ease 5s infinite; // delay of 5s
  -webkit-animation: left-one 15s ease 5s infinite;
}
.marquee p:nth-child(3) {
  animation: left-one 15s ease 10s infinite; // delay of 10s
  -webkit-animation: left-one 15s ease 10s infinite;
}