css 顶部 属性 在动画上无法正常工作

Question

此 属性 存在问题，在尝试为文本设置动画时，我使用文本光标跟随文本，但在动画的某些点上 "cursor"（只是a line) 不执行我在代码中放置的内容，所以......我不知道它发生了什么。 这里有一段代码：

.code {
  position: relative;
  width: 0px;
  height: 180px;
  animation: coding 1.4s;
  animation-fill-mode: forwards;
  animation-timing-function: steps(20);
  overflow: hidden;
}
@keyframes coding {
  0% {
    width: 0;
  }
  100% {
    width: 230px;
  }
}
.code p {
  color: red;
  width: 258px;
  letter-spacing: 3px;
  display: inline-block;
}
.code span  {
  position: absolute;
  top: 10px;
  right: 0;
  color: red;
  animation: cods 7s;
  animation-fill-mode: forwards;
  font-size: 20px;
}
@keyframes cods {
  0% {
    opacity: 1;
    top: 10px;
    right: 0;
  }
  50% {
    top: 10px;
    right: 0;
  }
  75% {
    top: 30px;
    right: 0;
  }
  100% {
    top: 30px;
    left: 0;
  }
}

<div class="code">
    <p>&lt;I am the animated text&gt;</p><span>|</span>
</div>

如您所见，光标先向左移动，然后再向下移动，但这不是代码上的。从 50% 到 75% 我说："go 20px down" 然后从 75% 到 100%："go left".

Answer 1

通过在 100% 关键帧中将 left: 0 更改为 right: 100% 来修复它！