Skip to content

Instantly share code, notes, and snippets.

@zhishaofei3
Forked from csssecrets/dabblet.css
Created August 5, 2016 04:44
Show Gist options
  • Save zhishaofei3/d520b883a171c60728720cade4ce4a30 to your computer and use it in GitHub Desktop.
Save zhishaofei3/d520b883a171c60728720cade4ce4a30 to your computer and use it in GitHub Desktop.
Typing animation
/**
* Typing animation
*/
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-right-color: transparent; }
}
h1 {
font: bold 200% Consolas, Monaco, monospace;
/*width: 8.25em;*/
width: 15ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 2s steps(15),
caret 1s steps(1) infinite;
}
<h1>CSS is awesome!</h1>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment