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'의 기본값과 절대 값 사이에서 움직일 수 없습니다. –
나는 그것을 알았어, 고마워! –