O efeito de máquina de escrever é um recurso visual simples e muito interessante para dar mais vida à sua página. Ele pode ser implementado apenas com HTML e CSS, sem necessidade de JavaScript. A ideia básica é criar uma animação em CSS que inicia com o texto oculto — reduzindo a largura do elemento para zero e escondendo o excesso com overflow: hidden — e, a cada etapa da animação, essa largura aumenta gradualmente um caractere por vez, até revelar todo o texto.

Vamos começar com um exemplo prático. Primeiro, veja a estrutura básica em HTML:

<div class="typewriter">
    <h1>Efeito de Máquina de escrever em CSS</h1>
</div>

Agora vamos ao CSS responsável por criar o efeito de digitação. É nele que definimos a animação que fará o texto aparecer como se estivesse sendo escrito em tempo real.

.typewriter{
    display: inline-flex;
}

.typewriter h1{
    font-family: monospace;

    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid #FFF;
    animation: typing 3s steps(36) forwards,
                    blink 1s infinite step(1);
}

@keyframes typing{
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

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

Primeiro, criamos um contêiner para o texto que receberá o efeito. No exemplo, utilizamos a classe .typewriter. Em seguida, definimos a propriedade display como inline-flex (também poderia ser inline-block), garantindo que o elemento se ajuste exatamente ao tamanho do texto que ele envolve.

Para o elemento interno — no caso, .typewriter h1 — utilizamos uma fonte monoespaçada. Isso é importante porque, nesse tipo de fonte, todos os caracteres possuem a mesma largura. Dessa forma, ao executar a animação em passos, cada incremento da largura do elemento revelará exatamente uma letra, mantendo o efeito de digitação consistente.

Aplicamos a propriedade overflow: hidden para ocultar qualquer parte do texto que ultrapasse a largura do elemento, garantindo que apenas o trecho “digitado” fique visível. Também utilizamos white-space: nowrap; para evitar que o texto quebre em múltiplas linhas, já que isso comprometeria o efeito. Por fim, adicionamos border-right: 1px solid #FFF;, que insere uma barra no final do texto e funciona como um cursor piscando, tornando a animação mais realista. Utilizamos a cor #FFF para uma página de fundo preto.

Em seguida, adicionamos a propriedade animation, que é uma shorthand capaz de reunir várias propriedades de animação em uma única linha. É ela que dá vida ao efeito. No nosso exemplo, aplicamos duas animações ao mesmo tempo: uma definida no @keyframes typing, responsável pela digitação, e outra no @keyframes blink, que faz o cursor piscar.

Na animação definida em @keyframes typing, começamos com a largura em 0 (escondendo todo o texto) e terminamos com a largura em 100% (exibindo o texto completo). Definimos que a duração da animação será de 3s (animation-duration: 3s) e que ela será executada em 36 incrementos (animation-timing-function: steps(36)). Esses 36 passos correspondem ao número de caracteres do texto, fazendo com que cada caractere seja revelado individualmente. Caso o texto seja alterado, esse valor também precisará ser ajustado. Já o valor forwards, referente à propriedade animation-fill-mode, indica que o elemento deve permanecer no último estado da animação, mantendo o texto visível após a digitação ser concluída.

Já a animação definida em @keyframes blink é mais simples. Ela faz com que a borda que simula o cursor fique transparente durante metade do ciclo, criando o efeito de piscar. Definimos a duração como 1s (animation-duration: 1s) e configuramos para que se repita indefinidamente (animation-iteration-count: infinite). Também definimos o animation-timing-function para steps(1).

E pronto! Agora temos a nossa animação de máquina de escrever concluída. Você pode visualizar o exemplo funcionando.

Trata-se de um efeito simples, mas muito interessante para dar mais dinamismo e personalidade às nossas páginas. T++