Typing and erasing animation using CSS

<style> /* Typing animation */ @keyframes typing { from { width: 0; } to { width: 100%; } } .typing { overflow: hidden; white-space: nowrap; animation: typing 3s steps(20, end) infinite; } /* Erasing animation */ @keyframes erasing { from { width: 100%; } to { width: 0; } } .erasing { overflow: hidden; white-space: nowrap; animation: erasing 3s steps(20, end) infinite; } </style> <p class="typing">This text will be typed out.</p> <p class="erasing">This text will be erased.</p>