css top屬性在動畫上無法正常工作

這個屬性有一個問題，當試圖動畫文本時，我使用文本光標來跟隨文本，但在動畫的某個點上這個「光標」（只是一行）不會做我對代碼所做的事情，所以......我不知道發生了什麼事情。這裏有一段代碼：css top屬性在動畫上無法正常工作

.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％：「去左」。

來源

2017-02-24 Kenny Amaro

「left」屬性在'auto'的默認值和絕對值之間不是可以動畫的。 –

我不知道，謝謝！ –

通過在100％關鍵幀中將left: 0更改爲right: 100%來修復它！

來源

2017-02-24 16:17:01 nncho

css top屬性在動畫上無法正常工作

回答

相關問題