Masterchoc

Untitled

Jun 5th, 2018
139
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .typewriter h1 {
  2.   overflow: hidden; /* Ensures the content is not revealed until the animation */
  3.   border-right: .15em solid orange; /* The typwriter cursor */
  4.   white-space: nowrap; /* Keeps the content on a single line */
  5.   margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  6.   letter-spacing: .15em; /* Adjust as needed */
  7.   animation:
  8.     typing 3.5s steps(40, end),
  9.     blink-caret .75s step-end infinite;
  10. }
  11.  
  12. /* The typing effect */
  13. @keyframes typing {
  14.   from { width: 0 }
  15.   to { width: 100% }
  16. }
  17.  
  18. /* The typewriter cursor effect */
  19. @keyframes blink-caret {
  20.   from, to { border-color: transparent }
  21.   50% { border-color: orange; }
  22. }
RAW Paste Data