Typewriter Effect: The caret is advancing too quickly

Question

Typewriter Effect: The caret is advancing too quickly

I am trying to achieve a typewriter effect on my text, but the blinking cursor is extending further than the actual text.

See Image for Problem

Here is the code I am using:

HTML:

<div class="title">
   <h1>Hi, I'm ConnerDE</h1>
</div>

CSS:

.title h1 {
    color: #fff;
    font-family: monospace;
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: typing 3.5s steps(16, end), blink-caret .5s step-end infinite;
}

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

@keyframes blink-caret {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: orange
    }
}

The flashing caret should stop right at the end of the text.

html css

Answer 1

Answer №1

Align the title element to the center and adjust its width using the following code:

.title {
   margin: 0 auto;
   width: fit-content;
}
.title h1 {
   color: #000;
   font-family: monospace;
   overflow: hidden;
   border-right: .15em solid orange;
   white-space: nowrap;
   letter-spacing: .15em;
   animation: typing 3.5s steps(16, end), blink-caret .5s step-end infinite;
}

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

@keyframes blink-caret {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: orange
    }
}

<div class="title">
   <h1>Hi, I'm ConnerDE</h1>
</div>

To achieve a moving effect for the text, you can also center the text like so:

.title {
   margin: 0 auto;
   width: fit-content;
}
.title h1 {
   margin: 0 auto;
   color: #000;
   font-family: monospace;
   overflow: hidden;
   border-right: .15em solid orange;
   white-space: nowrap;
   letter-spacing: .15em;
   animation: typing 3.5s steps(16, end), blink-caret .5s step-end infinite;
}

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

@keyframes blink-caret {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: orange
    }
}

<div class="title">
   <h1>Hi, I'm ConnerDE</h1>
</div>

Answer 2

Align the title element to the center and adjust its width using the following code:

.title {
   margin: 0 auto;
   width: fit-content;
}
.title h1 {
   color: #000;
   font-family: monospace;
   overflow: hidden;
   border-right: .15em solid orange;
   white-space: nowrap;
   letter-spacing: .15em;
   animation: typing 3.5s steps(16, end), blink-caret .5s step-end infinite;
}

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

@keyframes blink-caret {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: orange
    }
}

<div class="title">
   <h1>Hi, I'm ConnerDE</h1>
</div>

To achieve a moving effect for the text, you can also center the text like so:

.title {
   margin: 0 auto;
   width: fit-content;
}
.title h1 {
   margin: 0 auto;
   color: #000;
   font-family: monospace;
   overflow: hidden;
   border-right: .15em solid orange;
   white-space: nowrap;
   letter-spacing: .15em;
   animation: typing 3.5s steps(16, end), blink-caret .5s step-end infinite;
}

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

@keyframes blink-caret {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: orange
    }
}

<div class="title">
   <h1>Hi, I'm ConnerDE</h1>
</div>

Typewriter Effect: The caret is advancing too quickly

Answer №1

Similar questions

Mobile Bootstrap4 NavBar Bug Fix

How can Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

I am encountering difficulties with generating images on canvas within an Angular environment

How can I ensure that an absolutely positioned element [created with React] snaps to the edge of its parent div when the page loads

The form continues to submit even if the validation process fails

Implementing jQuery form.js to dynamically update image src upon success

Calculating the Sum of Values in PHP using an HTML Form and Jquery

The utilization of CSS within Flask can sometimes lead to a state

Ways to retrieve the file name and additional attributes from a hidden input type

Amount of information gathered through Ruby Mechanize

Updating the chosen value in an HTML select menu dynamically using PHP

Transform a Div element into an image, ensuring compatibility with Internet Explorer 7 and 8

techniques for accessing HTML source code through an AJAX call

Executing unique calculations on Kendo UI Grid Columns

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

Unusual glitch with paint/rendering in Safari while navigating through a lengthy list of content

Deactivate the form element when a user selects another button

Is there a way to embed HTML code within a JavaScript variable?

Scroll to make the div slide in from the bottom

Python: HTML regex not finding a match