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>

<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>