Animates text like a terminal output.
the main purpose of this gist is to create an effect without any moving parts (variables)
Loosely based on the typewriter effect by Lea Verou and this StackOverflow discussion
Click here to view the example
This stylesheet has two classes.
type animates the textwait blinks the caret infinitelyThe way these classes are applied is left for logic (JavaScript) to decide...
Initiated by Makis Tracend ( @tracend )
| <html><head> | |
| <link rel="stylesheet" type="text/css" href="terminal.css"> | |
| </head><body> | |
| <h1 class="type">Hi there! How are you?</h1> | |
| <br> | |
| <p class="wait"> </p> | |
| </body></html> |
| @-webkit-keyframes terminal-typing { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| @-moz-keyframes terminal-typing { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| @-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 } | |
| } | |
| .type { | |
| display: inline-block; | |
| padding-right: 3px; | |
| white-space:nowrap; | |
| overflow:hidden; | |
| border-right: 3px solid transparent; | |
| -webkit-animation: terminal-typing 2s linear, | |
| blink-caret 1s 2; | |
| -moz-animation: terminal-typing 2s linear, | |
| blink-caret 1s 2; | |
| animation-fill-mode:both; | |
| } | |
| .wait { | |
| display: inline-block; | |
| border-right: 3px solid transparent; | |
| -webkit-animation: blink-caret 1s infinite; | |
| -moz-animation: blink-caret 1s infinite; | |
| } |