html - 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% 来修复它!