Animation How to - Create Typing animation with pure CSS

Question

We would like to know how to create Typing animation with pure CSS.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes typing {<!--  w ww .ja  va 2s  . co m-->
   from { width:100%}
   to {width: 0}
}
@-webkit-keyframes blink-caret {
   from , to { border-color:transparent}
   50%{border-color:black}
}
@-moz-keyframes typing {
   from { width:100%}
   to {width: 0}
}
@-moz-keyframes blink-caret {
   from , to { border-color:transparent}
   50%{border-color:black}
}
body {
  font-family: Consolas, monospace;
}

h1 {
  position: relative;
  float: left;
  font-size: 150%;
}

h1 span {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  background: white;
  border-left: .1em solid black;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: typing 17s steps(28, end),blink-caret 1s step-end infinite;
  -moz-animation: typing 17s steps(28, end),blink-caret 1s step-end infinite;
}
</style>

</head>
<body>
  <h1>
    this is a test.<span>&nbsp;</span>
  </h1>
</body>
</html>

The code above is rendered as follows: