CSS-Countdown-Animation: 3-2-1-Zahlen und ein Ring-Timer in CSS
Bau einen 3-2-1-Zahlen-Countdown und einen schrumpfenden Ring-Timer mit reinem CSS über @property, Counter und stroke-dashoffset. Erzeuge deinen eigenen und sieh ihn live in der Vorschau.
Ein Countdown mit reinem CSS animiert eine registrierte ganzzahlige Custom Property von der Startzahl bis null und gibt sie mit einem Counter aus. Registriere --n mit @property als integer, animiere sie mit steps(), damit sie einmal pro Sekunde tickt, und zeig sie mit counter-reset: n var(--n) und content: counter(n) an. Ein Ring ergänzt ein animiertes stroke-dashoffset.
Die Bausteine eines Countdowns nur mit CSS
Baustein
CSS
Aufgabe
Typisierte Variable
@property --n { syntax: "<integer>" }
Ermöglicht dem Browser, die Zahl zu animieren
Ticken
animation: count 3s steps(3) forwards
Ein Sprung pro Sekunde, hält den letzten Wert
Ausgeben
counter-reset: n var(--n)
Macht aus der Variable einen Counter
Anzeigen
::after { content: counter(n) }
Zeichnet die aktuelle Zahl
Ring
stroke-dashoffset: 0 bis Umfang
Leert einen Kreis in derselben Zeit
Ein Splash-Countdown, ein Quiz-Timer oder ein Launch-Moment braucht kein Skript. Diese Seite baut einen 3-2-1-Zahlen-Countdown und einen Ring-Countdown nur mit CSS, lässt dich einen mit eigener Startzahl und Geschwindigkeit erzeugen und liefert einen Fallback für ältere Browser. Für einen Countdown bis zu einem Kalenderdatum nutzt du stattdessen unseren Countdown-Timer-Generator.
Wähle im Generator die Startzahl und die Sekunden pro Schritt.
Wähle den Zahlenstil, den Ringstil oder beides und drück auf Wiederholen, um es noch einmal zu sehen.
Kopiere HTML und CSS. Es läuft ganz ohne JavaScript.
Lies den Abschnitt zum Fallback, wenn du Browser ohne @property unterstützen musst.
Nutze steps(n) mit n gleich der Startzahl, damit jede Sekunde genau eine ganze Zahl zeigt.
Füge der Animation forwards hinzu, damit der Endwert nach dem Ende stehen bleibt.
Pack die Bewegung des Rings in eine Query für reduzierte Bewegung, aber behalte die Zahlen, denn sie tragen die Information.
Ein CSS-Countdown kann am Ende nichts auslösen. Muss bei null etwas passieren, hör in JavaScript auf das Ereignis animationend.
Häufige Fragen
Warum springt mein Countdown direkt auf null?
Die Custom Property ist nicht registriert. Eine nicht registrierte Custom Property lässt sich nicht interpolieren, daher springt der Browser vom ersten zum letzten Wert. Füge eine @property-Regel mit syntax "<integer>", inherits und einem initial-value hinzu.
Welche Browser unterstützen @property?
MDN führt @property als Baseline 2024, seit Juli 2024 in aktuellen Browsern neu verfügbar. In älteren Browsern tickt die Zahl nicht, deshalb zeigt diese Seite einen Fallback mit gestapelten Zahlen.
Wie zeigt der Countdown am Ende Los an?
Füge ein zweites Element mit dem Wort hinzu, starte es mit opacity 0 und gib ihm eine Einblend-Animation mit einem animation-delay, das der Länge des Countdowns entspricht. Blende die Zahl im selben Moment aus.
Ist das dasselbe wie ein Countdown bis zu einem Datum?
Nein. Ein Datums-Countdown braucht die aktuelle Uhrzeit, die CSS nicht lesen kann, daher ist JavaScript nötig. Unser Countdown-Timer-Generator baut diese Art. Diese Seite ist für kurze, feste Countdowns wie 3-2-1.
Warum der Counter-Trick funktioniert
Wird --n als integer registriert, bekommt es einen Typ, sodass Keyframes von 3 bis 0 ganze Zwischenzahlen erzeugen statt eines plötzlichen Wechsels. counter-reset akzeptiert diese ganze Zahl über var(), und counter() macht daraus Text in einem Pseudo-Element.
steps(3) teilt eine dreisekündige Animation in drei gleiche Sprünge. Ohne das bekommst du dieselben Zahlen, aber das Timing folgt der Easing-Kurve, und das Ticken wirkt ungleichmäßig.
Den Ring zeichnen
Der Umriss eines SVG-Kreises lässt sich als ein einziger Strich zeichnen, der so lang ist wie der Umfang, 2 mal Pi mal der Radius. Wird stroke-dashoffset von null auf diese Länge bewegt, gleitet der Strich aus dem Bild, und der Ring leert sich gleichmäßig.
Dreh das SVG um minus 90 Grad, damit sich der Ring von oben her leert, und setze stroke-linecap: round für ein weicheres Ende.
3-2-1-Zahlen-Countdown
Tickende Zahl mit @property und einem Counter
Bearbeite den Code, um ihn erneut laufen zu lassen. Die Zahl sinkt einmal pro Sekunde und bleibt bei 0 stehen.
Ring-Countdown
Zahl in einem sich leerenden Ring
Der Ring nutzt stroke-dashoffset an einem SVG-Kreis und hört auf, sich zu bewegen, wenn reduzierte Bewegung angefordert ist.
Fallback ohne @property
Gestapelte Zahlen mit animation-delay
Jede Zahl ist ein eigenes Element und wird der Reihe nach eine Sekunde lang gezeigt. Das funktioniert in jedem Browser, der CSS-Animationen unterstützt.