CC3 Typing Animation

Thursday, July 19, 2012

CC3 Typing Animation

6:57 AM Posted by Hemant Verma
Labels: Animated Content, CSS

CSS 3 is going to be very messive hit day by day and we can easily create the animations using the CSS 3 and HTML be'coz CSS 3 provide us the very awesome technique with unique methods of animation. So, our friend create a Typing Animation with the help of CSS 3 and HTML, which will automatically generate the text and animation will like the typing from keyboard.

Codes of CSS 3 Typing Animation

<html>
<head>
<style>
@-webkit-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}
@-moz-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}
@-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 }
}
body { font-family: Consolas, monospace; }
h5 {
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;

    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}
</style>
</head>
<body>
<h5><font color="red"><3 "I Love You My Rose" <3</font></h5>
</body>
</html>