Introduzione: cos’è l’effetto macchina da scrivere CSS
L’effetto macchina da scrivere CSS, noto anche come typewriter effect, è un’animazione testuale che fa sembrare un testo in fase di digitazione, carattere dopo carattere, come se una vera macchina da scrivere invisibile fosse all’opera. È una micro-interaction molto popolare tra web designer e developer che desiderano dare un tocco “vivo” al proprio progetto web.
A differenza di altre animazioni di testo, l’effetto macchina da scrivere CSS cattura subito l’attenzione: simula il movimento di digitazione reale e, con l’aggiunta del cursore lampeggiante, restituisce all’utente un feedback visivo intrigante e coinvolgente.
Quando usare l’effetto macchina da scrivere CSS: esempi UX e contesti
- Hero section: aprire la home page con un testo che “si scrive da solo” crea un impatto immediato e offre uno storytelling più coinvolgente.
- Titoli animati: per dare dinamicità ai titoli di sezione o alle call to action, attirando l’attenzione dell’utente su una frase chiave.
- Effetti testuali dinamici: in un portfolio online, in una presentazione di servizi o in un post del blog, l’effetto macchina da scrivere CSS può evidenziare parole chiave e rendere il contenuto più creativo.
- Microinteractions: per piccole interazioni di testo in banner, alert o tooltip, offrendo un’esperienza più accattivante.
Attenzione a non abusarne: troppe animazioni di testo contemporanee possono sovraccaricare l’interfaccia e distrarre l’utente.
Il cuore dell’animazione: @keyframes e steps() per l’effetto macchina da scrivere
L’effetto macchina da scrivere CSS si basa su un’animazione graduale che mostra le lettere una alla volta. In particolare:
@keyframes: definisce i fotogrammi dell’animazione.steps(n, end): suddivide l’animazione in passaggi netti, simulando i singoli tocchi dei tasti.
Se il tuo testo ha 10 caratteri, potresti usare steps(10, end), impostando la durata (ad esempio 4s) per definire la velocità di “digitazione”.
Come simulare il cursore lampeggiante nell’effetto macchina da scrivere CSS
Per rendere l’effetto macchina da scrivere CSS ancora più realistico, serve un cursore lampeggiante:
border-rightoborder-left:- Assegna a un elemento (
spanodiv) la proprietàborder-right: 2px solid #000;e crea un’animazione che alternitransparentevisible.
- Assegna a un elemento (
- Pseudo-elemento
::after:- Usando
content: "",width,heighte un’animazione divisibility, puoi creare un cursore personalizzato che lampeggia.
- Usando
Codice CSS puro per l’effetto
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Effetto Macchina da Scrivere CSS</title>
<style>
.typewriter-container {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #000;
font-family: monospace;
font-size: 2rem;
}
.typewriter-text {
display: inline-block;
animation: typing 4s steps(20, end) 1s 1 normal both,
blinkCursor 700ms steps(1, end) infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 20ch;
}
}
@keyframes blinkCursor {
from {
border-color: transparent;
}
to {
border-color: black;
}
}
</style>
</head>
<body>
<div class="typewriter-container">
<div class="typewriter-text">
Ciao, questo è l'effetto macchina da scrivere CSS!
</div>
</div>
</body>
</html>Spiegazione rapida
.typewriter-container:display: inline-block; overflow: hidden; white-space: nowrap;per evitare che il testo vada a capo.border-right: 2px solid #000;simula il cursore fisso (se combinato con l’animazione di lampeggio).
.typewriter-text:- Applica due animazioni:
typing(mostra il testo a step netti) eblinkCursor(lampeggio cursore).
- Applica due animazioni:
typing:widthva da 0 a20ch, rivelando i caratteri in 20 passi netti (steps(20, end)).
blinkCursor:- Alterna
border-color: transparent;eborder-color: black;ogni 700ms.
- Alterna
Versione responsive e accessibile
- Responsive:
- Puoi usare
font-size: clamp(1rem, 5vw, 2rem)al posto di un valore fisso, per adattare il testo a schermi diversi. - Se il testo supera i 20 caratteri, adegua
steps()e la larghezza into { width: XXch; }.
- Puoi usare
- Accessibilità:
- Non animare testi fondamentali troppo rapidamente (considera utenti con difficoltà visive o cognitive).
- Usa
@media (prefers-reduced-motion: reduce)per disabilitare o ridurre l’animazione in caso di preferenze di movimento ridotto.
Esempio di media query per preferenza ridotta di movimento:
@media (prefers-reduced-motion: reduce) {
.typewriter-text {
animation: none;
}
}Link a risorse esterne utili
Link a contenuti interni del blog
- Approfondisci le animazioni CSS moderne per perfezionare i tuoi effetti.
- Scopri la Guida CSS Avanzato 2025 per padroneggiare layout e animazioni.
- Se vuoi creare un effetto analogo con JavaScript, leggi Effetto Macchina da Scrivere con Typed.js per funzionalità più complesse.
Conclusione: alternative animate JS/CSS e best practice per performance
L’effetto macchina da scrivere CSS offre un’animazione leggera e priva di dipendenze esterne, perfetta per progetti dove la semplicità e la rapidità di caricamento sono prioritarie. Se invece vuoi gestire testi dinamici (con pause, riscrittura, più frasi) o necessiti di funzioni extra, potresti valutare soluzioni in JavaScript come Typed.js, che offre maggiore flessibilità.
Per ottimizzare il tutto:
- Non abusare delle animazioni e limita gli elementi animati in contemporanea.
- Verifica la compatibilità cross-browser e rispetta le preferenze di movimento ridotto.
- Mantieni un codice pulito e organizza le animazioni in fogli di stile dedicati quando il progetto si fa complesso.
Sperimenta con timing, colori, font e aggiunte personalizzate, ma mantieni sempre la UX coerente e fluida.
