A CSS-only typewriter effect (#snippet)

I just found Marco Denig’s article "CSS tricks". There are some good tricks in it. The trick that stood out to me was the CSS-only typewriter effect.
It’s a pretty sweet effect, and I want to document it for my future self…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

I just found Marco Denig's article "CSS tricks". There are some good tricks in it. The trick that stood out to me was the CSS-only typewriter effect.

It's a pretty sweet effect, and I want to document it for my future self. I mean, look at it. ? The typing below is done without JavaScript!

Marco uses a combination of white-space: nowrap / overflow: hidden to hide overflowing characters, defines a monospace font to make the container's width predictable, and then animates the width of the surrounding container. The blinking cursor is realized by animating the right border.

Overall that's pretty smart!

/* adjusted CSS of the above custom element */
type-writer .text {
  width: 33ch;
  animation: typing 2s steps(22), 
    blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 1.5em;
  margin: 1em auto;
}

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}

Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-10-06T02:34:17+00:00) » A CSS-only typewriter effect (#snippet). Retrieved from https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/.
MLA
" » A CSS-only typewriter effect (#snippet)." Stefan Judis | Sciencx - Thursday April 29, 2021, https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/
HARVARD
Stefan Judis | Sciencx Thursday April 29, 2021 » A CSS-only typewriter effect (#snippet)., viewed 2022-10-06T02:34:17+00:00,<https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » A CSS-only typewriter effect (#snippet). [Internet]. [Accessed 2022-10-06T02:34:17+00:00]. Available from: https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/
CHICAGO
" » A CSS-only typewriter effect (#snippet)." Stefan Judis | Sciencx - Accessed 2022-10-06T02:34:17+00:00. https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/
IEEE
" » A CSS-only typewriter effect (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/. [Accessed: 2022-10-06T02:34:17+00:00]
rf:citation
» A CSS-only typewriter effect (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2021/04/29/a-css-only-typewriter-effect-snippet/ | 2022-10-06T02:34:17+00:00
https://github.com/addpipe/simple-recorderjs-demo