.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; ) )Veja a Pen jrWwWM de Geoff Graham (@geoffgraham) em CodePen.
Notas:
- A demonstração depende do flexbox, então isso pode afetar o layout no teste
- Assume o uso de Autoprefixer
- A largura do contêiner de texto será determinada pelo comprimento do texto sendo usado
- Adicionar mais etapas à
typinganimação aumentará a suavidade da digitação - Ajuste o com
letter-spacingbase na família da fonte e tamanho da fonte sendo usado
Mais!
Alguns usam JavaScript, que às vezes pode ser preferível (literalmente adicionar um caractere por vez parece mais uma máquina de escrever real) e às vezes não (possíveis problemas de acessibilidade).
Veja a animação Pen Typewriter puro CSS de Thiago Teles Pereira (@thiagoteles) no CodePen.
Veja a Pen JS Typewriter de Simon Shahriveri (@ hi-im-si) no CodePen.
Veja a máquina de escrever Pen por gavra (@gavra) no CodePen.
Veja a máquina de escrever Pen CSS de Danielgroen (@danielgroen) no CodePen.
Veja o Pen Tippy-tappy-typer de Stove (@stevn) no CodePen.
Veja Caneta CSS Digitando Múltiplas Linhas com Circuito Piscando de Joeri Boudewijns (@Bojoer) em CodePen.