<!--
Inspired by
@Prathkum's tweet: https://twitter.com/Prathkum/status/1392434632935841793
and
@KevinJPowell's video: https://youtu.be/w1nhwUGsG6M
-->
<div class="typing"></div>
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
font-family: 'IM Fell English', serif;
background-image: repeating-linear-gradient(60deg, #000 0px, #222 2px, #000 4px);
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.typing {
font-size: 48px;
&::before {
content: '';
animation: text 15s step-end infinite;
}
@keyframes text {
0% { content: ''; }
20% { content: 'T'; }
23% { content: 'Th'; }
26% { content: 'Thi'; }
28% { content: 'This'; }
30% { content: 'This '; }
32% { content: 'This i'; }
35% { content: 'This is'; }
37% { content: 'This is '; }
40% { content: 'This is y'; }
42% { content: 'This is yo'; }
44% { content: 'This is you'; }
50% { content: 'This is yo'; }
51% { content: 'This is y'; }
52% { content: 'This is '; }
54% { content: 'This is m'; }
57% { content: 'This is me'; }
59% { content: 'This is me.'; }
63% { content: 'This is me'; }
64% { content: 'This is m'; }
65% { content: 'This is '; }
67% { content: 'This is C'; }
69% { content: 'This is CO'; }
71% { content: 'This is COO'; }
73% { content: 'This is COOL'; }
75% { content: 'This is COOL!'; }
80% { content: 'This is COOL'; }
81% { content: 'This is COO'; }
82% { content: 'This is CO'; }
83% { content: 'This is C'; }
85% { content: 'This is '; }
86% { content: 'This is'; }
87% { content: 'This i'; }
89% { content: 'This '; }
91% { content: 'This'; }
92% { content: 'Thi'; }
93% { content: 'Th'; }
94% { content: 'T'; }
95% { content: ''; }
}
&::after {
content: '';
display: inline-block;
width: 0.1em; height: 0.75em;
margin-left: 0.1em;
background-color: #fff;
animation: blink 0.75s ease-in-out infinite;
@keyframes blink {
0%, 25%, 100% { opacity: 1; }
50%, 75% { opacity: 0; }
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.