I have implemented a typewriter animation effect using the code from this source (link provided). I intentionally set everything to slow speed for better clarity. The animation works fine, but there is an issue where each letter that appears on the screen gets partially erased by the cursor on its right. Is there a way to resolve this using only CSS or do I need to incorporate JavaScript? Thank you.
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
/* Global */
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: black;
}
.line-1{
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 4px solid green;
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 100s steps(44) 1s 1 normal both,
blinkTextCursor 1000ms steps(544) infinite normal;
}
@keyframes typewriter{
from{width: 0;}
to{width: 24em;}
}
@keyframes blinkTextCursor{
from{border-right-color: green;}
to{border-right-color: transparent;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
<title>
Test
</title>
</head>
<body>
<p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
</body>
</html>