I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the link above to see how it was originally set up. Currently, my code looks like this:
h1 {
font-size: 30px;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1,
.text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 15s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
@keyframes text2 {
0%,
50%,
100% {
width: 0;
}
60%,
90% {
width: 6em;
}
}
@keyframes text1 {
0%,
50%,
100% {
width: 0;
}
10%,
40% {
width: 10em;
}
}
@keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}<div style="text-align: center;">
<h2><span class="text_1">Coastal Media Provides</span><span class="text_2">Photography</span></h2>
</div>If I try to add a text_3 like they did with span2, it doesn't seem to work. Does anyone have any suggestions on how to make it work?