Animação de contagem regressiva em CSS: números e timers em anel
Animação de contagem regressiva em CSS
Animação de contagem regressiva em CSS: números 3-2-1 e um timer em anel
Crie uma contagem regressiva 3-2-1 com números e um timer em anel que se esvazia, só com CSS, usando @property, counters e stroke-dashoffset. Gere a sua e veja a prévia ao vivo.
Uma contagem regressiva só com CSS anima uma custom property inteira registrada, do número inicial até zero, e a exibe com um counter. Registre --n com @property como integer, anime-a com steps() para que ela avance uma vez por segundo e mostre-a com counter-reset: n var(--n) e content: counter(n). Um anel acrescenta um stroke-dashoffset animado.
As partes de uma contagem regressiva só com CSS
Peça
CSS
Função
Variável tipada
@property --n { syntax: "<integer>" }
Permite que o navegador anime o número
Avanço
animation: count 3s steps(3) forwards
Um salto por segundo, mantém o último valor
Conversão
counter-reset: n var(--n)
Transforma a variável em um counter
Exibição
::after { content: counter(n) }
Desenha o número atual
Anel
stroke-dashoffset: 0 até a circunferência
Esvazia um círculo no mesmo tempo
Uma contagem de abertura, um timer de quiz ou um momento de lançamento não precisam de script. Esta página monta uma contagem regressiva 3-2-1 com números e uma contagem em anel só com CSS, deixa você gerar a sua com o número inicial e a velocidade que quiser e traz uma alternativa para navegadores antigos. Para uma contagem até uma data do calendário, use o nosso gerador de contador regressivo.
Escolha o número inicial e os segundos por etapa no gerador.
Escolha o estilo com número, o estilo com anel ou os dois, e aperte repetir para ver de novo.
Copie o HTML e o CSS. Ele roda sem nenhum JavaScript.
Leia a seção de alternativa se precisar dar suporte a navegadores sem @property.
Use steps(n) com n igual ao número inicial, para que cada segundo mostre um número inteiro.
Adicione forwards à animação para que o valor final permaneça depois que ela terminar.
Envolva o movimento do anel em uma query de movimento reduzido, mas mantenha os números, já que eles carregam a informação.
Uma contagem regressiva em CSS não consegue disparar nada quando termina. Se algo precisa acontecer no zero, escute o evento animationend em JavaScript.
Perguntas frequentes
Por que minha contagem pula direto para zero?
A custom property não está registrada. Uma custom property não registrada não pode ser interpolada, então o navegador troca do primeiro valor direto para o último. Adicione uma regra @property com syntax "<integer>", inherits e um initial-value.
Quais navegadores suportam @property?
O MDN lista @property como Baseline 2024, recém-disponível nos navegadores atuais desde julho de 2024. Em navegadores mais antigos o número não avança, e é por isso que esta página mostra uma alternativa com números empilhados.
Como faço a contagem mostrar Já no final?
Adicione um segundo elemento com a palavra, comece com opacity 0 e dê a ele uma animação de fade-in com um animation-delay igual à duração da contagem. Esconda o número no mesmo momento.
Isto é o mesmo que uma contagem regressiva até uma data?
Não. Uma contagem até uma data precisa da hora atual, que o CSS não consegue ler, então exige JavaScript. O nosso gerador de contador regressivo cria esse tipo. Esta página é para contagens curtas e fixas, como 3-2-1.
Por que o truque do counter funciona
Registrar --n como integer dá um tipo a ela, então keyframes de 3 a 0 produzem números inteiros intermediários em vez de uma troca repentina. O counter-reset aceita esse inteiro por meio de var(), e o counter() o transforma em texto em um pseudoelemento.
steps(3) divide uma animação de três segundos em três saltos iguais. Sem ele você obtém os mesmos números, mas o ritmo segue a curva de easing e os avanços parecem irregulares.
Desenhando o anel
O contorno de um círculo SVG pode ser desenhado como um único traço do tamanho da circunferência, 2 vezes pi vezes o raio. Mover o stroke-dashoffset de zero até esse comprimento faz o traço deslizar para fora de vista, então o anel se esvazia suavemente.
Gire o SVG em menos 90 graus para que o anel comece a se esvaziar pelo topo, e defina stroke-linecap: round para uma ponta mais suave.
Contagem regressiva 3-2-1 com números
Número que avança com @property e um counter
Edite o código para rodar de novo. O número cai uma vez por segundo e para em 0.
Contagem regressiva em anel
Número dentro de um anel que se esvazia
O anel usa stroke-dashoffset em um círculo SVG e para de se mover quando o movimento reduzido é solicitado.
Alternativa sem @property
Números empilhados com animation-delay
Cada número é um elemento próprio e aparece por um segundo, um de cada vez. Funciona em qualquer navegador que suporte animações CSS.