Animazione countdown in CSS: numeri e timer ad anello
Animazione countdown in CSS
Animazione countdown in CSS: numeri 3-2-1 e un timer ad anello in CSS
Crea un countdown numerico 3-2-1 e un timer ad anello che si svuota in puro CSS con @property, counter e stroke-dashoffset. Genera il tuo e guarda l'anteprima dal vivo.
Un countdown in puro CSS anima una custom property intera registrata dal numero iniziale fino a zero e la stampa con un counter. Registra --n con @property come integer, animala con steps() così scatta una volta al secondo, e mostrala con counter-reset: n var(--n) e content: counter(n). Un anello aggiunge uno stroke-dashoffset animato.
Le parti di un countdown solo CSS
Elemento
CSS
Compito
Variabile tipizzata
@property --n { syntax: "<integer>" }
Permette al browser di animare il numero
Scatti
animation: count 3s steps(3) forwards
Un salto al secondo, mantiene l'ultimo valore
Stampa
counter-reset: n var(--n)
Trasforma la variabile in un counter
Visualizzazione
::after { content: counter(n) }
Disegna il numero corrente
Anello
stroke-dashoffset: 0 fino alla circonferenza
Svuota un cerchio nello stesso tempo
Un countdown di apertura, il timer di un quiz o il momento di un lancio non hanno bisogno di uno script. Questa pagina costruisce un countdown numerico 3-2-1 e un countdown ad anello solo con il CSS, ti permette di generarne uno con il tuo numero iniziale e la tua velocità, e offre un fallback per i browser più vecchi. Per un conto alla rovescia verso una data del calendario, usa invece il nostro generatore di timer countdown.
Scegli nel generatore il numero iniziale e i secondi per ogni passo.
Scegli lo stile con il numero, quello con l'anello o entrambi, e premi riproduci per rivederlo.
Copia HTML e CSS. Funziona senza alcun JavaScript.
Leggi la sezione sul fallback se devi supportare browser senza @property.
Usa steps(n) con n uguale al numero iniziale, così ogni secondo mostra un numero intero.
Aggiungi forwards all'animazione così il valore finale resta dopo la fine.
Racchiudi il movimento dell'anello in una query per il movimento ridotto, ma mantieni i numeri, perché portano l'informazione.
Un countdown in CSS non può attivare nulla quando finisce. Se a zero deve succedere qualcosa, ascolta l'evento animationend in JavaScript.
Domande frequenti
Perché il mio countdown salta direttamente a zero?
La custom property non è registrata. Una custom property non registrata non può essere interpolata, quindi il browser passa dal primo valore all'ultimo. Aggiungi una regola @property con syntax "<integer>", inherits e un initial-value.
Quali browser supportano @property?
MDN indica @property come Baseline 2024, disponibile nei browser attuali da luglio 2024. Nei browser più vecchi il numero non scatta, ed è per questo che in questa pagina è mostrato un fallback con numeri sovrapposti.
Come faccio a mostrare Via alla fine del countdown?
Aggiungi un secondo elemento con la parola, fallo partire con opacity 0 e assegnagli un'animazione di dissolvenza in entrata con un animation-delay pari alla durata del countdown. Nascondi il numero nello stesso momento.
È la stessa cosa di un conto alla rovescia verso una data?
No. Un conto alla rovescia verso una data ha bisogno dell'ora corrente, che il CSS non può leggere, quindi richiede JavaScript. Il nostro generatore di timer countdown crea quel tipo. Questa pagina è per countdown brevi e fissi come 3-2-1.
Perché il trucco del counter funziona
Registrare --n come integer gli dà un tipo, quindi i keyframe da 3 a 0 producono numeri interi intermedi invece di uno scambio improvviso. counter-reset accetta quell'intero tramite var(), e counter() lo trasforma in testo in uno pseudo-elemento.
steps(3) divide un'animazione di tre secondi in tre salti uguali. Senza ottieni gli stessi numeri, ma il tempo segue la curva di easing e gli scatti sembrano irregolari.
Disegnare l'anello
Il contorno di un cerchio SVG si può disegnare come un unico tratto lungo quanto la circonferenza, 2 per pi greco per il raggio. Spostare stroke-dashoffset da zero a quella lunghezza fa scorrere il tratto fuori dalla vista, così l'anello si svuota in modo fluido.
Ruota l'SVG di meno 90 gradi così l'anello inizia a svuotarsi dall'alto, e imposta stroke-linecap: round per un'estremità più morbida.
Countdown numerico 3-2-1
Numero che scatta con @property e un counter
Modifica il codice per farlo ripartire. Il numero scende una volta al secondo e si ferma a 0.
Countdown ad anello
Numero dentro un anello che si svuota
L'anello usa stroke-dashoffset su un cerchio SVG e smette di muoversi quando viene richiesto un movimento ridotto.
Fallback senza @property
Numeri sovrapposti con animation-delay
Ogni numero è un elemento a sé e viene mostrato per un secondo a turno. Funziona in qualsiasi browser che supporti le animazioni CSS.