Typewriter Effect

.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; }
}

See the Pen jrWwWM by Geoff Graham (@geoffgraham) on CodePen.

Notes:

  • Demo relies on flexbox, so that could affect the layout in testing
  • Assumes the use of Autoprefixer
  • The width of the text container will be determined by the length of the text being used
  • Adding more steps to the typing animation will increase the smoothness of the typing
  • Adjust the letter-spacing based on the font-family and font-size being used

More!

Some use JavaScript, which may sometimes be preferable (literally adding a character at a time feels more like a real typewriter) and sometimes not be (potential accessibility concerns).

See the Pen Typewriter animation pure CSS by Thiago Teles Pereira (@thiagoteles) on CodePen.

See the Pen JS Typewriter by Simon Shahriveri (@hi-im-si) on CodePen.

See the Pen typewriter by gavra (@gavra) on CodePen.

See the Pen CSS typewriter by Danielgroen (@danielgroen) on CodePen.

See the Pen Tippy-tappy-typer by Stove (@stevn) on CodePen.

Comments

  1. User Avatar
    Alex
    Permalink to comment#

    Very clever way to do this with pure CSS.

    I actually wrote a jQuery plugin a while back (http://macarthur.me/typeit) that does this same thing with a few more features for customization, but it’s obviously dependent on jQuery. I might pull a few tips from your JS examples if I ever want to make a vanilla JS version — particularly the CSS injection idea. Some of it relies on jQuery to do what CSS animations could do natively, and I’d like to see that changed.

  2. User Avatar
    Qodesmith
    Permalink to comment#

    Love the CSS-only version! Ingenius.

    I too created a typing library – with no jquery (or any other) dependency – https://github.com/qodesmith/typer

    There is a link to a demo on the abive github page. It has a robust api that offers a lot of natural “typing” use-cases: back, continue, etc. I hope you guys find it useful!

  3. User Avatar
    Brandon
    Permalink to comment#

    Thanks so much for this, I have on problem. I build alot of websites for clients using squarespace and for some reason when implementing this after typing whats in HTML, the cursor keeps on going. Someone care to help me out?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Hey Brandon! The CSS snippet relies on a fine balance between the length of the content and the number of steps in the animation. If you’re finding that the cursor continues past the container, then try adjusting the number of steps in the animation so that is corresponds with the length of the content using the effect.

  4. User Avatar
    Shefalizzle
    Permalink to comment#

    I loved this! Thankyou. Is there any way you could do this for multiple lines in CSS alone?

  5. User Avatar
    Amaechi
    Permalink to comment#

    Hi guys, I am a self-learner and am wondering how I can tweak the second option (first option with js) to limit the number of times the loop is repeated.

  6. User Avatar
    Festus
    Permalink to comment#

    Hi, please i really need your help… how can i apply different marquee behaviors in one page?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      It depends on what method you choose based on the examples in the post, but I’d imagine using different class names for each instance is a good place to start. :)

  7. User Avatar
    Trey Barrow
    Permalink to comment#

    Is there a way to implement this upon scrolling? Where it doesn’t load until the user scrolls down to that section of the page?

  8. User Avatar
    siddharth panchal
    Permalink to comment#

    i want effect of typing text with slider, when slide changed text will be retyped everytime with pencil or pen icons, than & than slide will be changed at that time text will be retyped(Reload) automatically without any image, only text slider, so please help

  9. User Avatar
    Geoff
    Permalink to comment#

    AMAZING! I love it. The text im working with is on two lines, only the first line is typing out the second just isn’t there. What can i do to resolve this?

    thanks!

  10. User Avatar
    Mattie Fuller
    Permalink to comment#

    This was very helpful, thank you!

    I also found this Stack Overflow question to be helpful with typing on more than one line:

    https://stackoverflow.com/questions/22805189/typing-effect-for-multiple-lines

  11. User Avatar
    Nicholas
    Permalink to comment#

    In the second #more example (Javascript version that starts with ‘Hi Im Si.’, What is it that is causing this to loop infinitely, and how would you stop that to only loop through the list just once?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag