Animation How to - Create animated typing with jQuery

Question

We would like to know how to create animated typing with jQuery.
Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
.content {<!--from   w w  w . j a va  2 s.  co m-->
    visibility: hidden;
}
.content h1 {
    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;
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
    -moz-animation-delay: 3s;
}
@-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>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
window.setTimeout(function() {
    $('#contentdiv h1').css('visibility', 'visible');
}, 100);
window.setTimeout(function() {
    $('#contentdiv h2').css('visibility', 'visible');
}, 3100);
});//]]>  
</script>
</head>
<body>
  <div id="contentdiv" class="content">
    <h1>Hi there! this is a test.</h1>
    <h2>And I create cool stuff.</h2>
  </div>
</body>
</html>
The code above is rendered as follows: