CSS 动画在 IE 和 Microsoft 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>

问题是IE边缘没有识别您在密钥帧中使用的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>

相关内容

最新更新