Animación de cuenta atrás en CSS: números y anillos
Animación de cuenta atrás en CSS
Animación de cuenta atrás en CSS: números 3-2-1 y un temporizador en anillo
Crea una cuenta atrás numérica 3-2-1 y un temporizador en anillo que se encoge solo con CSS usando @property, counters y stroke-dashoffset. Genera la tuya y mírala en vivo.
Una cuenta atrás con CSS puro anima una propiedad personalizada entera registrada desde el número inicial hasta cero y la muestra con un counter. Registra --n con @property como entero, anímala con steps() para que avance una vez por segundo y muéstrala con counter-reset: n var(--n) y content: counter(n). Un anillo añade un stroke-dashoffset animado.
Las piezas de una cuenta atrás solo con CSS
Pieza
CSS
Función
Variable con tipo
@property --n { syntax: "<integer>" }
Permite al navegador animar el número
Avance
animation: count 3s steps(3) forwards
Un salto por segundo, conserva el último valor
Conversión
counter-reset: n var(--n)
Convierte la variable en un counter
Visualización
::after { content: counter(n) }
Dibuja el número actual
Anillo
stroke-dashoffset: de 0 a la circunferencia
Vacía un círculo en el mismo tiempo
Una cuenta atrás de bienvenida, un temporizador de un quiz o un momento de lanzamiento no necesitan un script. Esta página crea una cuenta atrás numérica 3-2-1 y una cuenta atrás en anillo solo con CSS, te deja generar una con tu propio número inicial y velocidad, y ofrece una alternativa para navegadores antiguos. Para una cuenta atrás hasta una fecha del calendario, usa nuestro generador de temporizadores de cuenta atrás.
Elige el número inicial y los segundos por paso en el generador.
Elige el estilo de número, el de anillo o ambos, y pulsa repetir para verlo de nuevo.
Copia el HTML y el CSS. Funciona sin nada de JavaScript.
Lee la sección de alternativa si tienes que dar soporte a navegadores sin @property.
Usa steps(n) con n igual al número inicial, para que cada segundo muestre un número entero.
Añade forwards a la animación para que el valor final se mantenga al terminar.
Envuelve el movimiento del anillo en una query de movimiento reducido, pero conserva los números, porque son los que llevan la información.
Una cuenta atrás en CSS no puede disparar nada al terminar. Si algo debe ocurrir al llegar a cero, escucha el evento animationend en JavaScript.
Preguntas frecuentes
¿Por qué mi cuenta atrás salta directamente a cero?
La propiedad personalizada no está registrada. Una propiedad personalizada sin registrar no se puede interpolar, así que el navegador pasa del primer valor al último de golpe. Añade una regla @property con syntax "<integer>", inherits y un initial-value.
¿Qué navegadores admiten @property?
MDN indica @property como Baseline 2024, disponible en los navegadores actuales desde julio de 2024. En navegadores antiguos el número no avanza, por eso en esta página se muestra una alternativa con números apilados.
¿Cómo hago que la cuenta atrás muestre Go al final?
Añade un segundo elemento con la palabra, empiézalo con opacity 0 y dale una animación que aparezca con un animation-delay igual a la duración de la cuenta atrás. Oculta el número en ese mismo momento.
¿Es lo mismo que una cuenta atrás hasta una fecha?
No. Una cuenta atrás hasta una fecha necesita la hora actual, que CSS no puede leer, así que requiere JavaScript. Nuestro generador de temporizadores de cuenta atrás crea ese tipo. Esta página es para cuentas atrás cortas y fijas como 3-2-1.
Por qué funciona el truco del counter
Registrar --n como entero le da un tipo, así que unos keyframes de 3 a 0 producen números enteros intermedios en lugar de un cambio brusco. counter-reset acepta ese entero mediante var(), y counter() lo convierte en texto en un pseudoelemento.
steps(3) divide una animación de tres segundos en tres saltos iguales. Sin él obtienes los mismos números, pero el ritmo sigue la curva de easing y los saltos se sienten irregulares.
Cómo dibujar el anillo
El contorno de un círculo SVG se puede dibujar como un solo trazo tan largo como la circunferencia, 2 por pi por el radio. Mover stroke-dashoffset de cero a esa longitud desplaza el trazo fuera de la vista, así que el anillo se vacía con suavidad.
Gira el SVG menos 90 grados para que el anillo empiece a vaciarse desde arriba, y pon stroke-linecap: round para un extremo más suave.
Cuenta atrás numérica 3-2-1
Número que avanza con @property y un counter
Edita el código para volver a ejecutarlo. El número baja una vez por segundo y se queda en 0.
Cuenta atrás en anillo
Número dentro de un anillo que se vacía
El anillo usa stroke-dashoffset en un círculo SVG y deja de moverse cuando se pide movimiento reducido.
Alternativa sin @property
Números apilados con animation-delay
Cada número es su propio elemento y se muestra durante un segundo por turnos. Funciona en cualquier navegador que admita animaciones CSS.