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

Question

此属性存在问题，在尝试为文本设置动画时，我使用文本光标跟随文本，但在动画的某个点上，这个“光标”（只是一条线）没有做什么我输入了代码，所以...我不知道它发生了什么。 这里有一段代码：

.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%：“向下 20 像素”，然后从 75% 到 100%：“向左”。

Answer 1

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