我试图在我的网站上得到一个多行打字机的效果。我有下面的代码，它确实工作，除了它显示的文字之前，动画发生。所以，当第一行是打字，第二行显示在它下面。第一行打字后，然后第二行消失，并打字了。我觉得我一定是错过了一些小东西。我是相当新的编码。
/*copy and paste this into your CSS editor*/
.typewriter p {
white-space: nowrap;
overflow: hidden;
}
.typewriter p:nth-child(1) {
/*If you are having problems with text clipping change the width from 16em to a higher value*/
width: 16em;
animation: type 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(2) {
/*If you are having problems with text clipping change the width from 13.5em to a higher value*/
width: 16em;
opacity: 0;
-webkit-animation: type2 5s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 0;
border: none;
}
}<div class="typewriter">
<p> Words have power.</p>
<p> We leverage that power for good.</p>
</div>
1条答案
按热度按时间ih99xse11#
虽然我没有看到第二行显示的问题中描述的确切内容，但我看到第一行在动画开始前显示了一秒钟，但第二行保持隐藏，直到轮到它进行动画制作。
主要的问题似乎是第一行有一秒的延迟，在这一秒内它的不透明度是默认设置，即1，所以我们简单地看到它。
在-webkit-前缀版本和无前缀版本之间也有一些不一致，此代码段会更改这些版本，以便两者的计时相同。