a Auto Type text with only CSS!
A Pen by CSS Support on CodePen.
Created
July 3, 2017 23:31
-
-
Save CodeMyUI/43aea619d1a488027038f6c4a9aa6de0 to your computer and use it in GitHub Desktop.
Auto Type CSS !
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Mampel</title> | |
| </head> | |
| <body> | |
| <h1>Hello , CSS-Support !</h1> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @-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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment