Let's create a typewriter effect with only CSS and HTML

Whoa! Such a Cool effect in the gif above, right?

Let's create it.

Step 1 - HTML

• Create an element and add two classes such as the one below.

make sure you create it in your html file.

<p class="text typewriter">My stuff is so cool</p>

Step 2 - CSS

• a. Style global tags
• b. style text
• c. Add animation

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global - Not compulsory */
html{
  min-height: 100%;  
  overflow: hidden;  
}
body{
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family: 'Anonymous Pro', monospace;  
  background-color: rgb(25,25,25);  
}

/* text style */
.text{
    position: relative; /* Used to set the position top, bottom, etc */
    top: 50%;  
    width:  19ch; /*ch here means characters*/
    margin: 0 auto; /*Places it in the center vertically */
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    white-space: nowrap; /*Good in case of browsers weird default stuff */
    overflow: hidden; /* Hides some right hand characters as the animation plays */    
}

/* Animation */
.typewriter{
/* animation: name duration timing-function  iteration-count */
  animation: typewriter 4s steps(44) 1,
             blink 0.7s steps(44) infinite;
}
/* This is where the animation plays*/
@keyframes typewriter{
  from{width: 0;}
  to{width: 19ch;}
}
@keyframes blink{
  0%{border-right-color:  transparent;}
  100%{border-right-color:  yellow;}
}

See the code in action in my blog bonarhyme.com

See live preview and code in my codepen

If you found this helpful, please leave a like and comment below. Don't forget to follow me on twitter @Bonarhyme