Create typing effect using CSS3 animation

<div class="content">
            <h1>Typing Effect In Css3</h1>
            <h2>UI Designer</h2>
        </div>

<style>
      .content h1 {
    background:white;
    opacity:0.7;
    white-space:nowrap;
    overflow:hidden;
    border-right: 3px solid red;
    -webkit-animation: typing 7s steps(5, end),
                        blink-caret 1s step-end 2s;
    -moz-animation: typing 7s steps(50, 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 7s steps(50, end),
                        blink-caret 1s step-end infinite;
    -webkit-animation-delay:8s;
    -webkit-animation-fill-mode:both;
    -moz-animation: typing 7s steps(50, 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>