a Auto Type text with only CSS!
A Pen by CSS Support on CodePen.
a Auto Type text with only CSS!
A Pen by CSS Support on CodePen.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Mampel</title> | |
</head> | |
<body> | |
<h1>Hello , CSS-Support !</h1> | |
</body> | |
</html> |
@-webkit-keyframes typing { from { width: 0; } } | |
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } } | |
h1 { | |
font: bold 300% Consolas, Monaco, monospace; | |
border-right: .1em solid black; | |
width: 16.5em; | |
width: 21ch; | |
margin: 2em 1em; | |
white-space: nowrap; | |
overflow: hidden; | |
-webkit-animation: typing 2s steps(21, end), | |
blink-caret .5s step-end infinite alternate; | |
} |