CSS-aftelanimatie: 3-2-1-cijfers en een ringtimer in CSS
Bouw een 3-2-1-aftelling met cijfers en een krimpende ringtimer in pure CSS met @property, counters en stroke-dashoffset. Genereer uw eigen versie en bekijk die live.
Een aftelling in pure CSS animeert een geregistreerde integer custom property van het startgetal naar nul en toont die met een counter. Registreer --n met @property als integer, animeer hem met steps() zodat hij één keer per seconde tikt, en toon hem met counter-reset: n var(--n) en content: counter(n). Een ring voegt een geanimeerde stroke-dashoffset toe.
De onderdelen van een aftelling met alleen CSS
Onderdeel
CSS
Taak
Getypeerde variabele
@property --n { syntax: "<integer>" }
Laat de browser het getal animeren
Tikken
animation: count 3s steps(3) forwards
Eén sprong per seconde, houdt de laatste waarde vast
Omzetten
counter-reset: n var(--n)
Maakt van de variabele een counter
Tonen
::after { content: counter(n) }
Tekent het huidige getal
Ring
stroke-dashoffset: 0 tot de omtrek
Maakt een cirkel in dezelfde tijd leeg
Een aftelling op een openingsscherm, een timer in een quiz of een lanceermoment heeft geen script nodig. Deze pagina bouwt een 3-2-1-aftelling met cijfers en een aftelling met een ring in alleen CSS, laat u er een genereren met uw eigen startgetal en snelheid, en geeft een fallback voor oudere browsers. Voor een aftelling tot een datum in de kalender gebruikt u in plaats daarvan onze countdown-timer-generator.
Kies in de generator het startgetal en het aantal seconden per stap.
Kies de stijl met cijfers, de ringstijl of beide, en druk op opnieuw afspelen om het nog eens te bekijken.
Kopieer de HTML en CSS. Het draait helemaal zonder JavaScript.
Lees de sectie over de fallback als u browsers zonder @property moet ondersteunen.
Gebruik steps(n) met n gelijk aan het startgetal, zodat elke seconde één heel getal toont.
Voeg forwards toe aan de animatie zodat de eindwaarde blijft staan als hij klaar is.
Zet de beweging van de ring binnen een reduced motion-query, maar behoud de cijfers, want die dragen de informatie.
Een aftelling in CSS kan niets in gang zetten als hij afloopt. Als er bij nul iets moet gebeuren, luister dan in JavaScript naar het event animationend.
Veelgestelde vragen
Waarom springt mijn aftelling meteen naar nul?
De custom property is niet geregistreerd. Een niet-geregistreerde custom property kan niet geïnterpoleerd worden, dus de browser springt van de eerste waarde naar de laatste. Voeg een @property-regel toe met syntax "<integer>", inherits en een initial-value.
Welke browsers ondersteunen @property?
MDN vermeldt @property als Baseline 2024, sinds juli 2024 nieuw beschikbaar in de huidige browsers. In oudere browsers tikt het getal niet, daarom staat op deze pagina een fallback met gestapelde cijfers.
Hoe laat ik de aftelling aan het einde Go tonen?
Voeg een tweede element met het woord toe, begin het op opacity 0 en geef het een animatie die infadet met een animation-delay gelijk aan de lengte van de aftelling. Verberg het getal op hetzelfde moment.
Is dit hetzelfde als aftellen tot een datum?
Nee. Een aftelling tot een datum heeft de huidige tijd nodig, en die kan CSS niet lezen, dus dat vereist JavaScript. Onze countdown-timer-generator bouwt dat soort. Deze pagina is voor korte, vaste aftellingen zoals 3-2-1.
Waarom de counter-truc werkt
Door --n als integer te registreren krijgt hij een type, zodat keyframes van 3 naar 0 hele getallen ertussen opleveren in plaats van een plotselinge wissel. counter-reset accepteert die integer via var(), en counter() maakt er tekst van in een pseudo-element.
steps(3) verdeelt een animatie van drie seconden in drie gelijke sprongen. Zonder krijgt u dezelfde getallen, maar volgt de timing de easing-curve en voelen de tikken ongelijk aan.
De ring tekenen
De omtrek van een SVG-cirkel kan getekend worden als één streep die even lang is als de omtrek, 2 maal pi maal de straal. Door stroke-dashoffset van nul naar die lengte te verplaatsen schuift de streep uit beeld, zodat de ring vloeiend leegloopt.
Draai de SVG min 90 graden zodat de ring vanaf de bovenkant begint leeg te lopen, en zet stroke-linecap: round voor een zachter uiteinde.
3-2-1-aftelling met cijfers
Tikkend getal met @property en een counter
Bewerk de code om hem opnieuw te starten. Het getal daalt één keer per seconde en blijft op 0 staan.
Aftelling met een ring
Getal binnen een leeglopende ring
De ring gebruikt stroke-dashoffset op een SVG-cirkel en stopt met bewegen als om minder beweging wordt gevraagd.
Fallback zonder @property
Gestapelde cijfers met animation-delay
Elk getal is een eigen element en wordt om de beurt één seconde getoond. Het werkt in elke browser die CSS-animaties ondersteunt.