CSS动画是滞后的，如何与文本保持一致？

Question

在我正在构建/测试内容的网站上，我的名字后面有一个“插入符号”，当最初加载时它略微超出了结尾，然后又返回。很难解释，因此这里是一个示例。观看紫色闪烁的插入符号。

https://codepen.io/Andrewbel1/project/editor/AwWOQq

 .typewriter h1 {
 // font-size: 30px;
 font-weight: lighter;
 color: #747fe0;
 font-family: 'Ubuntu Mono', serif;
 overflow: hidden;
 border-right: 0.53em solid white;
 white-space: nowrap;
 letter-spacing: 0.15em;
 animation: typing 1.7s steps(35, end), blink-caret 
 1s step-end infinite;
}

那么我该如何使闪烁的插入符号/矩形坚持文本而不走过去并立即返回？

我意识到这是一个非常具体的问题，可能没有人提出，但是我真的没有想法。

Answer 1

您好，我收到了您的问题，下面的示例已将其清除

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

body {
  background: #f4f7ff;
  padding-top: 1em;
  margin-left: 300px;
  margin-right: 300px;
  max-width: 1000px;
  margin: auto;
}
body.dark-mode {
  background-color: #313438;
  color: #eee;
}
body.dark-mode a {
  color: #313438;
}
body.dark-mode button {
  background-color: #eee;
  color: #313438;
}
body.light-mode {
  background-color: #eee;
  color: #313438;
}
body.light-mode a {
  color: #313438;
}
body.light-mode button {
  background-color: #313438;
  color: #eee;
}

.container {
  font-size: calc(15px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.9em + (1.6 - 1.5) * ((100vw - 300px)/(1600 - 500)));
  display: flex;
  margin-left: 0;
  margin-top: 60px;
}
.typewriter h1 {
  // font-size: 30px;
  font-weight: lighter;
  color: #747fe0;
  font-family: 'Ubuntu Mono', serif;
  overflow: hidden;
  border-right: 0.53em solid transparent;
  white-space: nowrap;
  letter-spacing: 0.15em;
  animation: typing 1.7s steps(35, end), blink-caret 1s step-end 2;
}
.container {
  margin-bottom: 60px;
}
.about_me {
  margin-bottom: 90px;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #747fe0;
  }
}
.navbar-container {
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
}
.navbar-container .navbar {
  display: flex;
  justify-content: space-around;
  width: 305px;
  font-family: Helvetica;
  font-weight: lighter;
  font-size: 1.3em;
  margin-top: 40px;
}
.navbar-container .navbar a {
  position: relative;
  text-decoration: none;
  color: #5a5d7a;
}
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}
.about_me {
  font-family: 'Raleway';
  font-size: 20px;
  word-spacing: 3px;
  line-height: 40px;
}
.about_me a {
  font-family: 'Raleway';
  color: #747fe0;
}
.parent {
  font-size: calc(19px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.9em + (1.6 - 1.5) * ((100vw - 300px)/(1600 - 500)));
  width: 100%;
  height: 500px;
  max-width: 100%;
  float: center;
  border-radius: 15px;
}
.backcolor {
  background-color: #708090;
}
.child {
  width: 100%;
  height: 30px;
  margin-top: 0;
  border-radius: 15px 15px 0 0;
}
.backcolor_child {
  background-color: #dbdbdb;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: transparent;
  margin: 7px;
  padding: 8px;
}
.dot-1 {
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
  margin-right: 8px;
}
.dot-2 {
  height: 15px;
  width: 15px;
  background-color: orange;
  border-radius: 50%;
  margin-right: 8px;
}
.dot-3 {
  height: 15px;
  width: 15px;
  background-color: green;
  border-radius: 50%;
}
.terminal_content {
  font-family: 'Ubuntu Mono';
  font-size: 20px;
  margin-left: 40px;
  margin-top: 33px;
  line-height: 3px;
  width: 100%;
}
.contactInfo {
  display: inline;
}
span {
  overflow: hidden;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Andrew Belogurov</title>
  <meta name="description" content="Portfolio for Andrew Belogurov showcasing projects and skills.">
  <meta name="keywords" content="Andrew Belogurov, Portfolio, About, Projects, Experience, Contact, Info, Information">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="main.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
</head>

<body>
  <body id="body" class="dark-mode">
  <div class="navbar-container">
    <nav class="navbar">
      <div class="arrow1 hvr-float-shadow">
        <a href="http://www.google.com" target="_blank">
          <span>Google</span>
        </a>
      </div>
      <div class="arrow2 hvr-float-shadow">
        <a href="https://www.example_not_re.com" target="_blank">
          <span>My Website</span>
        </a>
      </div>
      <div class="arrow3 hvr-float-shadow">
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"><i class="fas fa-moon"></i></button>
</div>
    </nav>
  </div>
  <div class="container">
    <div class="typewriter">
      <h1>&#62; Hi, I'm Andrew</h1>
    </div>
  </div>

  <div class="about_me">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
      <br>Check out some of my <a href="#recent projects" style="text-decoration:none"><strong><font color="#747fe0">recent projects</font></strong></a> below.</p>
  </div>

  <div class="parent backcolor">
    <div class="child backcolor_child">
      <div class="flex-container">
        <div class="dot-1"></div>
        <div class="dot-2"></div>
        <div class="dot-3"></div>
      </div>
    </div>
    <div class="terminal_content">
      <p><font color="white">&#62; Andrew.currentLocation</font></p>
      <p><font color = "#e0c260">&#34;Harrisburg, PA&#34;</font></p>
    <br>
    <br>
      <p><font color="white">&#62; Andrew.contactInfo</font></p>
      <!-- <p><font color = "#e0c260"> -->
      <span>&#91;&#34;<a href="mailto: andrewbel@example.com" target='_blank' style="text-decoration:none"><font color = "#43bddb">andrewbel@example.com>&#34;,</span>
      <span>&#34;<a href="https://github.com" target="_blank" style="text-decoration:none"><font color = "#43bddb">github</font></a>&#34;,</span>
      <span>&#34;<a href="https://stackoverflow.com/users" target="_blank" style="text-decoration:none"><font color = "#43bddb">stackoverflow</a></font>&#34;&#93;</span>

      <p><font color="white">&#62; andrew.resume</p>
      <p>&#34;<font color="#43bddb"><a href="#resume"target="_blank" style="text-decoration:none"><font color = "#43bddb">Resume</font></a></font>&#34;</p>
    <br>
    <br>
      <p><font color="white">&#62; Andrew.interests</p>
    </div>

  </div>

  <p>sitiiheg</p>
  <h1>hehgeuh</h1>

</body>

</html>

在动画和边框颜色上进行了小的更改，您可以在下面的代码中看到

.typewriter h1 {
  border-right: 0.53em solid transparent;
  animation: typing 1.7s steps(35, end), blink-caret 1s step-end 2;
}