Compte à rebours animé en CSS : chiffres et minuteurs en anneau
Compte à rebours animé en CSS
Compte à rebours animé en CSS : chiffres 3-2-1 et minuteur en anneau
Créez un compte à rebours chiffré 3-2-1 et un minuteur en anneau qui se vide, en CSS pur avec @property, les compteurs et stroke-dashoffset. Générez le vôtre et prévisualisez-le en direct.
Un compte à rebours en CSS pur anime une propriété personnalisée entière enregistrée, du nombre de départ jusqu'à zéro, et l'affiche avec un compteur. Enregistrez --n avec @property comme entier, animez-le avec steps() pour qu'il change une fois par seconde, et affichez-le avec counter-reset: n var(--n) et content: counter(n). Un anneau ajoute un stroke-dashoffset animé.
Les éléments d'un compte à rebours 100 % CSS
Élément
CSS
Rôle
Variable typée
@property --n { syntax: "<integer>" }
Permet au navigateur d'animer le nombre
Cadence
animation: count 3s steps(3) forwards
Un saut par seconde, conserve la dernière valeur
Conversion
counter-reset: n var(--n)
Transforme la variable en compteur
Affichage
::after { content: counter(n) }
Dessine le nombre actuel
Anneau
stroke-dashoffset : de 0 à la circonférence
Vide un cercle sur la même durée
Un compte à rebours d'introduction, un minuteur de quiz ou un moment de lancement n'ont pas besoin de script. Cette page construit un compte à rebours chiffré 3-2-1 et un compte à rebours en anneau uniquement en CSS, vous permet d'en générer un avec votre propre nombre de départ et votre vitesse, et fournit une solution de repli pour les anciens navigateurs. Pour un compte à rebours jusqu'à une date du calendrier, utilisez plutôt notre générateur de compte à rebours.
Choisissez le nombre de départ et le nombre de secondes par étape dans le générateur.
Choisissez le style chiffré, le style anneau ou les deux, et appuyez sur rejouer pour le revoir.
Copiez le HTML et le CSS. Il fonctionne sans aucun JavaScript.
Lisez la section sur la solution de repli si vous devez prendre en charge des navigateurs sans @property.
Utilisez steps(n) avec n égal au nombre de départ, pour que chaque seconde affiche un nombre entier.
Ajoutez forwards à l'animation pour que la valeur finale reste affichée à la fin.
Placez le mouvement de l'anneau dans une requête de mouvement réduit, mais gardez les chiffres, car ce sont eux qui portent l'information.
Un compte à rebours en CSS ne peut rien déclencher quand il se termine. Si quelque chose doit se produire à zéro, écoutez l'événement animationend en JavaScript.
Questions fréquentes
Pourquoi mon compte à rebours saute-t-il directement à zéro ?
La propriété personnalisée n'est pas enregistrée. Une propriété personnalisée non enregistrée ne peut pas être interpolée, le navigateur passe donc directement de la première valeur à la dernière. Ajoutez une règle @property avec syntax "<integer>", inherits et une initial-value.
Quels navigateurs prennent en charge @property ?
MDN classe @property comme Baseline 2024, nouvellement disponible dans les navigateurs actuels depuis juillet 2024. Dans les navigateurs plus anciens, le nombre ne défile pas, c'est pourquoi une solution de repli à nombres empilés est présentée sur cette page.
Comment afficher Partez à la fin du compte à rebours ?
Ajoutez un second élément contenant le mot, démarrez-le à opacity 0 et donnez-lui une animation d'apparition en fondu avec un animation-delay égal à la durée du compte à rebours. Masquez le nombre au même moment.
Est-ce la même chose qu'un compte à rebours jusqu'à une date ?
Non. Un compte à rebours jusqu'à une date a besoin de l'heure actuelle, que le CSS ne peut pas lire, il nécessite donc du JavaScript. Notre générateur de compte à rebours crée ce type-là. Cette page concerne les comptes à rebours courts et fixes comme 3-2-1.
Pourquoi l'astuce du compteur fonctionne
Enregistrer --n comme entier lui donne un type, de sorte que des keyframes de 3 à 0 produisent des nombres entiers intermédiaires au lieu d'un changement brutal. counter-reset accepte cet entier via var(), et counter() le transforme en texte dans un pseudo-élément.
steps(3) découpe une animation de trois secondes en trois sauts égaux. Sans lui, vous obtenez les mêmes nombres, mais le rythme suit la courbe d'easing et les changements semblent irréguliers.
Dessiner l'anneau
Le contour d'un cercle SVG peut être dessiné comme un seul tiret aussi long que la circonférence, soit 2 fois pi fois le rayon. Faire passer stroke-dashoffset de zéro à cette longueur fait glisser le tiret hors de vue, et l'anneau se vide en douceur.
Faites pivoter le SVG de moins 90 degrés pour que l'anneau commence à se vider par le haut, et définissez stroke-linecap: round pour une extrémité plus douce.
Compte à rebours chiffré 3-2-1
Nombre qui défile avec @property et un compteur
Modifiez le code pour le relancer. Le nombre baisse une fois par seconde et reste à 0.
Compte à rebours en anneau
Nombre à l'intérieur d'un anneau qui se vide
L'anneau utilise stroke-dashoffset sur un cercle SVG et s'immobilise quand un mouvement réduit est demandé.
Solution de repli sans @property
Nombres empilés avec animation-delay
Chaque nombre est un élément distinct, affiché pendant une seconde à tour de rôle. Cela fonctionne dans tout navigateur qui prend en charge les animations CSS.