打字机效果，光标移至屏幕末端，然后自行修复

Question

我想在我的段落中添加一个打字机效果，当我添加它时，光标将键入所有内容，然后继续向左移动，然后进行自我修复。如何使它在文本结尾处结束。

#p12 {
   overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 2px;
    animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}
#p12 {
    display: inline-flex;
  }
  
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

<center>  
<p id="p12" style="color:red;font-size:20px">
<b>  Welcome to my website!  </b> </p> </center>

Answer 1

您可以在容器元素上使用display：flex来防止动画元素扩展到全屏宽度。 （我还用等价的<center>代替了对过时的margin:auto标签的使用：）

#container {
  display: flex;
}

#center {
  margin: auto;
}
/* Remaining CSS is identical to original */
#p12 {
  display: flex;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 2px;
  animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}

#p12 {
  display: inline-flex;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<div id="container">
  <div id="center">
    <p id="p12" style="color:red;font-size:20px">
      <b>Welcome to my website!</b> 
    </p>
  </div>
</div>

Answer 2

添加包装器div：

<div id="banner-message">
<center>  
<div id="p12" style="color:red;font-size:20px">
<b>  Welcome to my website!  </b> </div> </center>
</div>

尝试将此样式添加到包装器中：

#banner-message {
   display:flex;
   justify-content: center;
}