I am <span class="type">
<span>
<span>a CSS Hacker</span>
<span>an expert web developer</span>
<span>a lazy person!</span>
</span>
</span>
.type {
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 2s linear infinite alternate,
m 12s steps(3) 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(-300%)}
}
body {
font-size:40px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.