The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

The non JavaScript solution for a typing animation

posted on 6.6.2023 by Below Surface in "CSS"

Credits to Clueless Expert. YouTube link down below.

To create a typing animation, there usually is JavaScript involved or a NPM package is installed. However, this simple (limited) solution, does the whole trick with pure HTML and CSS!

Step 1: HTML

<div class="header-text-animation">
   <h4>The passionate Web Developer from Bonn</h4>

Step 2: CSS

div.header-text-animation {
  display: inline-block;    

div.header-text-animation > h4 {   border-right: solid 2px;   width: 100%;   white-space: nowrap;   overflow: hidden;   animation:     typing 2s steps(40),     cursor .4s step-end infinite alternate; }

@keyframes typing { from {     width: 0   } }

@keyframes cursor {   50% {     border-color: transparent;   } }

Please note: The number of steps() needs to match the number of characters, including white spaces, of the animated text. 40 in my case.


typing animation
no javascript