我试图创建一个连续的文字动画。先是一行,然后是下一行,再然后是下一行。但它会同时动画三行文字。
.autotype {
overflow: hidden;
white-space: nowrap;
}
.autotype {
animation: autotype 8s steps(10, end);
animation-iteration-count: infinite;
}
@keyframes autotype {
from {
width: 0px;
}
}
@keyframes autotype {
0% {
width: 0px;
}
20% {
width: 70px;
}
40% {
width: 140px;
}
60% {
wdith: 210px;
}
80%. {
width: 280px;
}
100% {
width: 500px;
}
}
.alignnone {
height: 20px;
width: 50px;
position: relative;
top: 4px;
}
<div class="autotype">.
<p>Hello, and welcome to
<img src="http://4309.co.uk/wp-
content/uploads/2020/01/
Screenshot_20200110_150836-
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium
wp-image-8431" />Feel free to look</p>
<p>around the site and contact us via the form<br> on the contact page</div>
那么如何使其动画效果呈现出每行逐个显示,只有当第一行完全显示后才开始显示下一行。我尝试在动画本身中使用高度,但是,虽然这对第一行有效,但当下一行高度增加时,它们已经被渲染出来了。