使闪烁的光标在CSS动画结束时消失

我有一个闪烁的光标动画设置了两行文字

我希望光标在文本显示时显示，并在第一行末尾消失，但在第二行末尾保持闪烁

有人问了一个非常类似的问题，但解决方案使光标完全不可见：

测试了这个答案代码（在几个浏览器上），但它就是不起作用

以下是我所拥有的：

代码：

.typewriter1p{
溢出：隐藏；
右边框：15em实心#00aeff；
空白：nowrap；
保证金：0自动；
字母间距：0；
颜色：#fff；
左侧填充：10px；
动画：输入3.5s步数（40，结束），闪烁插入符号。75s步数结束无限；
}
.TypeWriter2p{
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：15em实心#00aeff；
空白：nowrap；
保证金：0自动；
字母间距：0；
颜色：#fff；
左侧填充：10px；
不透明度：0；
动画：输入3.5s步数（40，结束），闪烁插入符号。75秒步数结束无限，滑动1s轻松向前3.5s；
动画延迟：3.5s；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}
@关键帧幻灯片{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从…起
到{
边框颜色：#00aeff
}
50% {
边框颜色：透明；
}
}

明确的计划将识别问题

应对挑战，帮助恢复信心

我刚把

无限

从

.typewriter1p{

改为5

.typewriter1p{
溢出：隐藏；
右边框：15em实心#00aeff；
空白：nowrap；
保证金：0自动；
字母间距：0；
颜色：#fff；
左侧填充：10px；
动画：键入3.5s步骤（40，结束），闪烁插入符号。75s步骤结束5；
}
.TypeWriter2p{
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：15em实心#00aeff；
空白：nowrap；
保证金：0自动；
字母间距：0；
颜色：#fff；
左侧填充：10px；
不透明度：0；
动画：输入3.5s步数（40，结束），闪烁插入符号。75秒步数结束无限，滑动1s轻松向前3.5s；
动画延迟：3.5s；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}
@关键帧幻灯片{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从…起
到{
边框颜色：#00aeff
}
50% {
边框颜色：透明；
}
}

明确的计划将识别问题

应对挑战，帮助恢复信心

目前只对示例2进行了详细解释。示例3与问题的HTML和CSS完全相同，只是做了一些小改动

示例1-重新设计背景图像和渐变 HTML 首先，我们可以清理HTML。这是一个段落，所以让我们将其包装在一个段落元素中：

<p class="typewriter">
  A well defined plan will identify problems,
  address challenges, and help restore confidence.
</p>

明确的计划将识别问题，


应对挑战，帮助恢复信心。

如果您不一定要为此编写自己的动画，那么TypeIt's（）API可以减少自定义代码：

---

这种方法唯一的缺点是对动画本身的控制较少（需要覆盖库提供的CSS动画）。

这太棒了，除了“背景：白色用于隐藏显示前的文本。我忽略了提到这是在有图案的背景上运行的，这使得白色背景非常可见。@RichardMiller-好的，我添加了另外两个示例。请查看示例3，它是您问题中的HTML和CSS，只需稍加调整。示例1是我自己的新创建。谢谢感谢你的挑战。第三个是魅力–非常感谢。我确实在最后一个“@keyframes blink caret”中收到了一些警告代码片段–看起来它不像0，100公式。但是，嘿，它工作了。：）在第一行末尾留下一个不闪烁的光标。我需要完成的动画在第一行末尾没有光标，在第二行末尾有一个闪烁的光标。

<p class="typewriter">
  <span class="slide">
    <span class="inner-slide">A well defined plan will identify problems, 
  </span>
  </span><br>
  <span class="slide">
    <span class="inner-slide">address challenges, and help restore confidence.      </span>
  </span>
</p>

const secondInstance = new TypeIt('.typewriter2 p');
const firstInstance = new TypeIt('.typewriter1 p', {
  afterComplete: function (instance) {
    document.querySelector('.typewriter1 p .ti-cursor').remove();
    secondInstance.go();
  }
}).go();