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属性在动画上无法正常工作

回答

相关问题