Animation is lagging on Microsoft Edge and IE - html

Question

I'm developing a simple type of animation with CSS and HTML.
It works perfect on Mozilla, Opera and Chrome but in Microsoft Edge and IE browsers it is lagging.
Here is an example of my code:
.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>
As you can see from this example when the first row animation is finished, it shows the second row for a millisecond, then this second row disappears and starts typing as needed. The same for the third row.
How can I adjust my code so it won't show the second and the third row for this millisecond?