CSS动画在IE和Microsoft Edge中不起作用

Question

我正在开发一些打字动画。

除了EDGE之外，它在所有浏览器上都很完美。

从代码片段中可以看出，光标应始终仅在第三行的末尾可见。但是在Edge上，每行末尾都可以看到它。

我猜我的关键帧在EDGE中无法正常工作。 请帮助。

.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: none;
  }
}

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

@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: none;
  }
}

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

<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>

Answer 1

问题是IE Edge无法识别您在关键帧中使用的CSS属性border:none。在您的代码中使用border:0代替border:none。

.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: none;
      }
    }

    @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: none;
      }
    }

<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>