动画在Microsoft Edge和IE上落后

Question

我正在使用CSS和HTML开发一种简单的动画类型。 它在Mozilla，Opera和Chrome上运行良好，但在Microsoft Edge和IE浏览器中它仍然落后。

Here是我的代码示例：

.css-typing1 p {
  border-right: 0.03em solid black;
  color: black;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 2px;
  font-size: 1em;
  text-align: left;
}

.css-typing1 p:nth-child(1) {
  width: 18em;
  -webkit-animation: type 1.5s steps(40, end);
  animation: type 1.5s steps(40, end), blink-caret .5s step-end infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing1 p:nth-child(2) {
  width: 18em;
  opacity: 0;
  -webkit-animation: type2 1.5s steps(40, end);
  animation: type2 1.5s steps(40, end), blink-caret .5s step-end infinite;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing1 p:nth-child(3) {
  width: 18em;
  opacity: 0;
  -webkit-animation: type3 1.5s steps(40, end);
  animation: type3 1.5s steps(40, end), blink-caret .5s step-end infinite;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 0.03em solid black;
  }
  100% {
    opacity: 1;
    border: 0;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 0.03em solid black;
  }
  100% {
    opacity: 1;
    border: 0;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 0.03em solid black;
  }
  100% {
    opacity: 1;
    /*border: none;*/
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 0.03em solid black;
  }
  100% {
    opacity: 1;
    /*border: none;*/
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: black
  }
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: 0.03em solid black;
  }
  100% {
    border: 0;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: 0.03em solid black;
  }
  100% {
    border: 0;
  }
}

<div class="css-typing1">
  <p>
    Some text for row number 1
  </p>
  <p>
    Some text for row number 2
  </p>
  <p>
    Some text for row number 3
  </p>
</div>

正如您在第一行动画完成时从此示例中看到的那样，它显示第二行一毫秒，然后第二行消失并根据需要开始输入。第三行也一样。

如何调整我的代码，使其不显示此毫秒的第二行和第三行？