Witam, chciałbym prosić o pomoc. A więc, chce zrobic tekst który będzie miał animację. która będzie wprowadzała literkę po literce. Mam cały kod. ale on wyświetla tylko określoną liczbę znaków przez siebie. a jak chce się w stepie dać więcej znaków to i tak nie działa. A chcę tych znaków ponad 300. kilkoma słowami to nie wiem dla czego tak się dzieje, skoro mam zdeklarowane ze ma być ponad 300 , a robi inaczej. Z góry dziękuję.
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, 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: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>gotowiec</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>
Lorem ipsum dolor sit amet neque. Duis vel quam. Cum sociis natoque penatibus et turpis. Nullam at quam. </p><p>Pellentesque ac posuere orci at ipsum scelerisque pede turpis sed quam in augue. Donec pede. Etiam condimentum lorem semper magna iaculis augue. Suspendisse molestie. Quisque in velit eleifend purus dolor in est id felis. Aliquam erat in faucibus scelerisque. Vestibulum ullamcorper fringilla, nibh.
<span><span>
</p>
</body>
</html>