Animacja odliczania w CSS: liczby i timery w pierścieniu
Animacja odliczania w CSS
Animacja odliczania w CSS: liczby 3-2-1 i timer w pierścieniu
Zbuduj odliczanie liczbowe 3-2-1 i kurczący się timer w pierścieniu w czystym CSS z użyciem @property, liczników i stroke-dashoffset. Wygeneruj własne i zobacz podgląd na żywo.
Odliczanie w czystym CSS animuje zarejestrowaną właściwość niestandardową typu integer od liczby początkowej do zera i wyświetla ją przez licznik. Zarejestruj --n przez @property jako integer, animuj ją z steps(), aby zmieniała się raz na sekundę, i pokaż ją przez counter-reset: n var(--n) oraz content: counter(n). Pierścień dodaje animowany stroke-dashoffset.
Elementy odliczania w samym CSS
Element
CSS
Zadanie
Typowana zmienna
@property --n { syntax: "<integer>" }
Pozwala przeglądarce animować liczbę
Tykanie
animation: count 3s steps(3) forwards
Jeden skok na sekundę, zachowuje ostatnią wartość
Wypisanie
counter-reset: n var(--n)
Zamienia zmienną w licznik
Wyświetlenie
::after { content: counter(n) }
Rysuje bieżącą liczbę
Pierścień
stroke-dashoffset: 0 to circumference
Opróżnia okrąg w tym samym czasie
Odliczanie na ekranie powitalnym, timer w quizie czy moment premiery nie potrzebują skryptu. Ta strona buduje odliczanie liczbowe 3-2-1 i odliczanie w pierścieniu samym CSS, pozwala wygenerować własne z wybraną liczbą początkową i tempem oraz podaje rozwiązanie zapasowe dla starszych przeglądarek. Do odliczania do konkretnej daty użyj zamiast tego naszego generatora licznika czasu.
Wybierz w generatorze liczbę początkową i liczbę sekund na krok.
Wybierz styl liczbowy, pierścień lub oba i naciśnij Odtwórz ponownie, aby zobaczyć animację jeszcze raz.
Skopiuj HTML i CSS. Działa zupełnie bez JavaScript.
Przeczytaj sekcję o rozwiązaniu zapasowym, jeśli musisz obsługiwać przeglądarki bez @property.
Użyj steps(n) z n równym liczbie początkowej, aby każda sekunda pokazywała jedną pełną liczbę.
Dodaj forwards do animacji, aby końcowa wartość została po jej zakończeniu.
Otocz ruch pierścienia zapytaniem o ograniczony ruch, ale zostaw liczby, bo to one niosą informację.
Odliczanie w CSS nie może niczego wywołać po zakończeniu. Jeśli coś ma się stać przy zerze, nasłuchuj zdarzenia animationend w JavaScript.
Najczęściej zadawane pytania
Dlaczego moje odliczanie od razu skacze do zera?
Właściwość niestandardowa nie jest zarejestrowana. Niezarejestrowanej właściwości niestandardowej nie da się interpolować, więc przeglądarka przeskakuje z pierwszej wartości na ostatnią. Dodaj regułę @property z syntax "<integer>", inherits i initial-value.
Które przeglądarki obsługują @property?
MDN oznacza @property jako Baseline 2024, nowo dostępne we wszystkich aktualnych przeglądarkach od lipca 2024. W starszych przeglądarkach liczba się nie zmienia, dlatego na tej stronie pokazujemy rozwiązanie zapasowe z ułożonymi liczbami.
Jak sprawić, by odliczanie pokazało na końcu Start?
Dodaj drugi element z tym słowem, zacznij go z opacity 0 i nadaj mu animację pojawiania się z animation-delay równym długości odliczania. W tym samym momencie ukryj liczbę.
Czy to to samo co odliczanie do daty?
Nie. Odliczanie do daty potrzebuje bieżącego czasu, którego CSS nie potrafi odczytać, więc wymaga JavaScript. Nasz generator licznika czasu buduje taki rodzaj. Ta strona dotyczy krótkich, stałych odliczań, takich jak 3-2-1.
Dlaczego sztuczka z licznikiem działa
Zarejestrowanie --n jako integer nadaje jej typ, więc keyframes od 3 do 0 dają pośrednie pełne liczby zamiast nagłej zamiany. counter-reset przyjmuje tę liczbę całkowitą przez var(), a counter() zamienia ją w tekst w pseudoelemencie.
steps(3) dzieli trzysekundową animację na trzy równe skoki. Bez tego dostajesz te same liczby, ale czas podąża za krzywą easing i tykanie wydaje się nierówne.
Rysowanie pierścienia
Obrys okręgu SVG można narysować jako jedną kreskę o długości obwodu, czyli 2 razy pi razy promień. Zmiana stroke-dashoffset od zera do tej długości wysuwa kreskę z pola widzenia, więc pierścień płynnie się opróżnia.
Obróć SVG o minus 90 stopni, aby pierścień zaczynał się opróżniać od góry, i ustaw stroke-linecap: round dla łagodniejszego zakończenia.
Odliczanie liczbowe 3-2-1
Tykająca liczba z @property i licznikiem
Edytuj kod, aby uruchomić go ponownie. Liczba spada raz na sekundę i zatrzymuje się na 0.
Odliczanie w pierścieniu
Liczba wewnątrz opróżniającego się pierścienia
Pierścień używa stroke-dashoffset na okręgu SVG i przestaje się ruszać, gdy użytkownik prosi o ograniczenie ruchu.
Rozwiązanie zapasowe bez @property
Ułożone liczby z animation-delay
Każda liczba to osobny element pokazywany kolejno przez jedną sekundę. Działa w każdej przeglądarce obsługującej animacje CSS.