I'm currently updating my portfolio and have incorporated a typewriter effect into the second line of text. However, I'm finding that the speed of the effect is a bit too fast for my liking. I've attempted to adjust the animation seconds, delay, and other settings, but so far, nothing has been successful. Below is the code snippet:
HTML
<div class="banner">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 class="font-weight-light">Hi, I'm Kevin McCall</h1>
<!--Typewriter Animation Here-->
<p class="font-weight-lead">A Front-End Web Developer<span class="blink-cursor">
_</span></p>
</div>
</div>
</div>
</div>
CSS
/* Typewriter Effect */
.banner p {
color: red;
font-size: 50px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow-wrap: break-word;
overflow: hidden;
max-width: 100%;
display: inline-block;
animation: typing 4s steps(60, end);
animation-delay: 2s;
}
/* Blinking Underscore */
.blink-cursor{
animation: blink 1s infinite;
color: white;
}
/* Typing Animation */
@keyframes typing {
from {
max-width: 0%;
}
to {
max-width: 100%;
}
}
/* Blinking Underscore */
@keyframes blink{
to {opacity: 0;}
}