Typing Animation for Sentences

Community Contribution: Jaee Chew

Preview Link

CSS

.typing-container {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #0071E3;
    width: 100%;
 /* Set a fixed width */
    margin: 0 auto;
 /* Center horizontally */
    text-align: center;
    animation: typing 3s steps(30, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    } /* Match the width above */
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }

    50% {
        border-color: #0071E3;
    }
}

HTML

<div class="typing-container">This text is being typed...</div>