Created
April 19, 2017 14:12
-
-
Save iba-cmsteam/0abcf27c267e65a8c42046aea7721f86 to your computer and use it in GitHub Desktop.
CSS.typewriter effect
This file contains 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
.typewriter h1 { | |
overflow: hidden; /* Ensures the content is not revealed until the animation */ | |
border-right: .15em solid orange; /* The typwriter cursor */ | |
white-space: nowrap; /* Keeps the content on a single line */ | |
margin: 0 auto; /* Gives that scrolling effect as the typing happens */ | |
letter-spacing: .15em; /* Adjust as needed */ | |
animation: | |
typing 3.5s steps(40, end), | |
blink-caret .75s step-end infinite; | |
} | |
/* The typing effect */ | |
@keyframes typing { | |
from { width: 0 } | |
to { width: 100% } | |
} | |
/* The typewriter cursor effect */ | |
@keyframes blink-caret { | |
from, to { border-color: transparent } | |
50% { border-color: orange; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment