pagelab/typewriter.html

## typewriter.html
<!DOCTYPE html>
<html>
<head>
    <style>
        .writer {
        font-family: Courier, monospace;
        display: inline-block;
        }
        .writer-text {
            display: inline-block;
            overflow: hidden;
            letter-spacing: 2px;
            animation: typing 5s steps(30, end), blink .75s step-end infinite;
            white-space: nowrap;
            font-size: 30px;
            font-weight: 700;
            border-right: 4px solid orange;
            box-sizing: border-box;
        }

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

        @keyframes blink {
            from, to {
                border-color: transparent
            }
            50% {
                border-color: orange;
            }
        }
    </style>
    <body>
        <div class="writer">
            <div class="writer-text">Twinkle, twinkle, little star.</div>
        </div>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.writer {
	font-family: Courier, monospace;
	display: inline-block;
	}
	.writer-text {
	display: inline-block;
	overflow: hidden;
	letter-spacing: 2px;
	animation: typing 5s steps(30, end), blink .75s step-end infinite;
	white-space: nowrap;
	font-size: 30px;
	font-weight: 700;
	border-right: 4px solid orange;
	box-sizing: border-box;
	}

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

	@keyframes blink {
	from, to {
	border-color: transparent
	}
	50% {
	border-color: orange;
	}
	}
	</style>
	<body>
	<div class="writer">
	<div class="writer-text">Twinkle, twinkle, little star.</div>
	</div>

	</body>
	</html>