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.

See the Pen CSS Typing Multiple Lines with Blinking Caret by Joeri Boudewijns (@Bojoer) 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.

    • User Avatar
      Keara
      Permalink to comment#

      Wow this is awesome! Thanks for sharing!

    • User Avatar
      Lauren Berg
      Permalink to comment#

      Is this still available somewhere? I’d love to see it and the page is no longer available.

    • User Avatar
      alexmacarthur
      Permalink to comment#

      Sorry, I moved the site to a dedicated URL and it looks like the redirect was down for a while.

      The new location is https://typeitjs.com, but that redirect should also be working now.

  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!

    • User Avatar
      Kev
      Permalink to comment#
      .line{
        overflow: hidden; /* Ensures the content is not revealed until the animation <em>/
        border-right: .15em solid orange; /</em> The typwriter cursor <em>/
        white-space: nowrap; /</em> Keeps the content on a single line <em>/
        margin: 0 auto; /</em> Gives that scrolling effect as the typing happens <em>/
        letter-spacing: .10em; /</em> Adjust as needed */
        animation: 
        typing 3.5s steps(50, end),
        blink-caret .75s step-end infinite;
      }
      
      .line2{
        overflow: hidden; /* Ensures the content is not revealed until the animation <em>/
        border-right: .15em solid orange; /</em> The typwriter cursor <em>/
        white-space: nowrap; /</em> Keeps the content on a single line <em>/
        letter-spacing: .10em; /</em> Adjust as needed */
        animation: 
        typing 3.5s steps(50, end),
        blink-caret .75s step-end infinite;
        animation-delay: 3.5s;
        visibility: hidden;
        animation-fill-mode: forwards;
      }
      

      This is how I did it, give the .line2 class to your second line of text and so on.

  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?

  12. User Avatar
    Vyshnav Vinod
    Permalink to comment#

    THANKS SO MUCH FOR THIS THIS IS AWESOME

  13. User Avatar
    manuel
    Permalink to comment#

    Hi,

    I’d like to know how to remove the cursor, and how to make it type just until the text length?

    Great work.

    thank you!

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Hey Manuel!

      You can remove this property:
      border-right: .15em solid orange; /* The typwriter cursor */

  14. User Avatar
    Joeri
    Permalink to comment#

    Hi

    I know this is an old post but since my first ever typewriter solution without usage of JavaScript originated from here I thought it would be nice to provide my multiline typewriter solution.

    This solution allows to:
    1. use any font family, size and styles
    2. typewrite effect over multiple lines
    3. modify speed for each line separately
    4. leave cursor blinking, or not, at the last typed letter of the last line
    5. you could also modify the cursor color for each line or even change it from -> to -> to (and so on) on the same line.

    Actually most tricks or effects added with JavaScript could eventually be added using pure CSS and nothing else needed.

    See the Pen CSS Typing Multiple Lines with Blinking Caret by Joeri Boudewijns (@Bojoer) on CodePen.

    https://production-assets.codepen.io/assets/embed/ei.js

    There were some questions asked about this on Stack Exchange and on other forums and developer blogs so that’s also the main reason for posting it here.

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Thanks, Joeri, and nice work! I went ahead and added your pen to the collection.

  15. User Avatar
    Michael
    Permalink to comment#

    Love this !

    How can I have it start when the section appears (it’s a the bottom of my page)

    Thanks

  16. User Avatar
    Kate Murdock
    Permalink to comment#

    Hi! Is it possible to type and delete using only CSS? I am using just the CSS editor in wordpress and have it working for one line, but would love to be able to do multiple different phrases on that same line using a similar type and delete that was done with JS.

  17. User Avatar
    Diller
    Permalink to comment#

    nice ones there. i really like $.t.js ( https://github.com/mntn-dev/t.js ), which supports nested html tags as well.

  18. User Avatar
    Bahia
    Permalink to comment#

    So how to insert HTML/CSS the text in the third example?
    // array with texts to type in typewriter
    var dataText = [ “Amsterdam.”, “Full Service.”, “Webdevelopment.”, “Wij zijn Occhio!”];

  19. User Avatar
    Jacek
    Permalink to comment#

    Is there a way to loop this effect continuously so that it keeps replaying upon finishing?

  20. User Avatar
    David

    Thank you!!! I’ve been looking for a good typewriter effect for a while! I threw it on https://welearntechnology.com

  21. User Avatar
    Dinu
    Permalink to comment#

    Thank’s for helping to us

Leave 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