Animation How to - Create Typing animation with pure CSS and blinking caret








Question

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

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes typing {<!--  w  w w. j a v  a2  s  .co  m-->
   from { width:100%}
   to {width: 0}
}
@-webkit-keyframes blink-caret {
   from , to { border-color:transparent}
   50%{border-color:white}
}
@-moz-keyframes typing {
   from { width:100%}
   to {width: 0}
}
@-moz-keyframes blink-caret {
   from , to { border-color:transparent}
   50%{border-color:white}
}
body {
  font-family: 'VT323', cursive;
  background-color: #EEE;
}

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

h1 span {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  color: black;
  background: #EEE; /* same as background */
  border-left: .1em solid black;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: typing 5s steps(40, end),/* # of steps = # of characters */blink-caret 0.5s step-end infinite;
  -moz-animation: typing 17s steps(30, end),/* # of steps = # of characters */ blink-caret 1s step-end infinite;
}
</style>
</head>
<body>
  <h1>
    Welcome to java2s.com<span>&nbsp;</span>
  </h1>
</body>
</html>

The code above is rendered as follows: