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％我告诉：“下降20px”然后从75％下降到100％：“向左走”。

Answer 1

通过在100％关键帧中将left: 0更改为right: 100%来解决此问题！

css top属性在动画

1 个答案: