Answered type text animation

[Beppe]

hi there. This might be a silly question maybe because I know nothing about coding nor CSS but I found a CSS code online for a typing effect text animation which looks like this:

.typeit{color:yellow; font-weight:bolder;font-family: monospace;
overflow: hidden;
font-size:50px; /* this can be any font size you want */

border-right: 3px solid #1f1f1e; /* change this color in the keyframe too */

white-space: nowrap;
margin: 0 auto;
animation:
typeit 3.5s steps(40, end),
right-border .5s step-end infinite;
}

@keyframes typeit {
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #1f1f1e; /* change this in the CSS above too */ }
}

All I did is I copied and pasted the code on my website. It works. My question is.. at present the animation starts as soon as you land on such web page and I would like to be able to decide for it to start 2,3 or maybe 5 seconds after you open the website page.

Is there anyone on here that would be able to help?
Thanks in advance!
Beppe

 

[Johna]

Hi @Beppe,

I think animation-delay is what you're looking for.
animation-delay: 2s;

 

[Beppe]

Hey! Thanks Johna. I'll try that!