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