0
このプロパティに問題があり、テキストをアニメートしようとしているときにテキストをたどりますが、アニメーションの特定のポイントでこの "カーソル"（私はコードに書いたことをしないので、何が起こっているのか分かりません。 は、ここでは、コードの部分があります：あなたがここに見るようにCSSのトッププロパティがアニメーションで正しく機能していません
.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><I am the animated text></p><span>|</span>
</div>を、カーソルが最初に左に移動して、下に行くが、それはコードにありません。 50％から75％まで、私は言っている： "20pxダウン"と75％から100％へ： "左に行く"。
'left'プロパティは、デフォルト値の' auto'と絶対値の間でアニメーション化できません。 –
私はそれを知らなかった、ありがとう！ –