How to Create Typewriter Animation with CSS?

CSS Web Development Front End Technology

With the help of CSS animations, we can create a typewriter animation using JavaScript.

The following example illustrates this effect.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 2%;
   font-family: Courier, monospace;
   display: inline-block;
}
div > div {
   overflow: hidden;
   animation: enter 4s steps(30, end), blinker .65s step-end infinite;
   white-space: nowrap;
   font-size: 1.4em;;
   border-right: 5px solid blue;
}
@keyframes enter {
   0% {
      width: 0%
   }
   100% {
      width: 100%
   }
}
@keyframes blinker {
   0%, 100% {
      border-color: transparent
   }
   50% {
      border-color: blue;
   }
}
</style>
</head>
<body>
<div class="typewriter">
<div class="typewriter-text">This is what you've been waiting for..</div>
</div>
</body>
</html>

Output

This will produce the following result −

AmitDiwan

Published on 13-Mar-2021 12:12:33

Previous Page Print Page