CSS3动画文字打印效果

样式

    <style type="text/css">
        @-webkit-keyframes typing {
            from { width: 100% }
            to { width:0 }
        }

        @-webkit-keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: black }
        }

        @-moz-keyframes typing {
            from { width: 100% }
            to { width:0 }
        }

        @-moz-keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: black }
        }

        body { font-family: Consolas, monospace; }

        h1 {
            position: relative;
            float: left;
            font-size:150%;
        }

        h1 span {
            position:absolute;
            top:0;
            right:0;
            width:0;
            background: white; /* same as background */
            border-left: .1em solid black;

            -moz-box-sizing: border-box;
            box-sizing: border-box;

            -webkit-animation: typing 4s steps(8, end), /* # of steps = # of characters */
            blink-caret 1s step-end infinite;
            -moz-animation: typing 4s steps(8, end), /* # of steps = # of characters */
            blink-caret 1s step-end infinite;
        }
    </style>

HTML

<h1>小学生的小工程。<span>&nbsp;</span></h1>