Я хочу, чтобы мой текст был длиннее, поэтому это займет несколько абзацев, но когда я наберу <br> или начну новый <p>, текст в нижнем ряду начнет анимироваться одновременно с первым рядом. , Он должен быть пустым, пока не закончится первый ряд, а затем начать анимацию. Есть ли у вас какие-либо предложения?
body {
background: white;
padding-top: 10px;
}
p {
color: magenta;
font-family: "Courier";
font-size: 11px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 200em;
animation: type 10s steps(200, end);
}
p:nth-child(2) {
animation: type2 8s steps(60, end);
}
p a {
color: lime;
text-decoration: none;
}
span {
animation: blink 1s infinite;
}
@keyframes type {
from {
width: 0;
}
}
@keyframes type2 {
0% {
width: 0;
}
50% {
width: 0;
}
100% {
width: 100;
}
}
@keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: white;
}
<body>
<p>This is an example text with animation. Damn <br> Example <span>|</span></p>
<br> <br>
<p> well </p>
</body>