Animation How to - Create typing animation with CSS only

Question

We would like to know how to create typing animation with CSS only.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.content h1 {<!--   ww w .  ja v a 2 s . c  o  m-->
    background: white;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid black;
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end 2s;
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end 2s;
}
.content h2 {
    background: white;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid black;
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: both;
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
    -moz-animation-delay: 3s;
    -moz-animation-fill-mode: both;
}
@-webkit-keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 400px;
    }
}
@-moz-keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 400px;
    }
}
@-webkit-keyframes blink-caret {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: black
    }
}
@-moz-keyframes blink-caret {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: black
    }
</style>
</head>
<body>
  <div class="content">
    <h1>Hi there! this is a test.</h1>
    <h2>And this is a test.</h2>
  </div>
</body>
</html>

The code above is rendered as follows: