I am <span class="type" style="--n:3">
<span>
<span>a CSS Hacker</span>
<span>an expert web developer</span>
<span>a lazy person!</span>
</span>
</span>
<br>
I Like <span class="type" style="--n:4;--d:1s">
<span>
<span>hacking with CSS</span>
<span>watching animes</span>
<span>time traveling</span>
<span>healthy food</span>
</span>
</span>
.type {
--d:2s; /* duration */
display:inline-block;
vertical-align: bottom;
}
.type > span {
display:grid;
overflow: hidden;
height:1.2em;
}
.type span span {
width:0%;
max-width:max-content;
overflow: hidden;
height:inherit;
word-break:break-all;
animation:
c 0.5s infinite steps(1),
t var(--d) linear infinite alternate,
m calc(var(--d)*2*var(--n)) steps(var(--n)) infinite;
}
.type span span:before {
content:" ";
display:inline-block;
}
@keyframes t{
90%,100% {width:100%}
}
@keyframes c{
0%,100%{box-shadow:5px 0 0 #0000}
50% {box-shadow:5px 0 0 red }
}
@keyframes m{
100% {transform:translateY(calc(-100%*var(--n)))}
}
body {
font-size:40px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.