<html>
<head>
<title>Typing, Ma!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/lettering.js"></script>
<script>
$(document).ready(function() {
$(".page-title").lettering();
});
</script>
<style>
body {font-family: Helvetica;}
h1 {font-size: 100px;}
.char1, .char2, .char3 {
color: #fff;
border-right: .1em solid transparent;
-webkit-animation: typing .5s;
-webkit-animation-fill-mode: forwards;
}
.char1 {-webkit-animation-delay: .5s;}
.char2 {-webkit-animation-delay: 1s;}
/* or whatever your last character is */
.char3 {
padding-right: 2px;
-webkit-animation: typing 1s infinite;
-webkit-animation: blink 1s infinite;
-webkit-animation-delay: 1.5s;
}
@-webkit-keyframes typing {
from, to {color: #333; border-color: transparent; }
70% {color: #333; border-color: #07D6FF; }
}
@-webkit-keyframes blink {
from, to {color: #333; border-color: transparent; }
50% {border-color: #07D6FF;}
}
</style>
</head>
<body>
<h1 class="page-title">Hi.</h1>
</body>
</html>