css top property is not working properly on animation

Question

There is an issue with this property, while trying to animate a text, I'm using a text cursor to follow the text but on certain point of the animation this "cursor" (just a line) doesn't do what I put on the code, so... I don't know what is happening to it. Here you have the piece of code:

 .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> 

as you see here, the cursor first go to the left and then go to the bottom, but that's not on the code. from 50% to 75% I'm telling: "go 20px down" and then from 75% to 100%: "go left".

Answer 1

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