AI CSS Animations

CSS Number & Counter Animations

42 number animations in pure CSS: countdowns, rolling odometer digits, stats that count up, flip clocks, timers and live tickers.

Counting Number

A number counts up from zero to its target, with no JavaScript: a registered integer custom property is animated and rendered through a CSS counter. Ideal for stats sections.

one-shot · numbers

OTP Code Input Animation

Six code boxes fill one digit at a time while the focus ring and caret step from box to box, then a small wave marks the code as complete. Each box reads its index from --i.

typing · numbers · one-shot

Character Counter Typing Effect

A commit message types in while a counter and a small progress ring keep count, tick for tick. One registered integer drives the counter text, the ring and the steps() typing together.

typing · numbers · one-shot

Strikethrough Price Animation

The old price gets a slanted strike and fades back, then the new price springs up beside it. Made for pricing cards and sale banners; the strike is a pseudo-element scaled from the left.

highlight · one-shot · numbers

Odometer Number Animation

Digits roll up into place like a car odometer, each column on its own strip, with the right-hand columns spinning through extra turns. One keyframe, driven by a --to value per column.

numbers · one-shot

Flip Clock Animation

A flip clock whose seconds cards fold down every second, top half falling to reveal the next digit. The digits come from a registered integer and a cyclic @counter-style, so 9 wraps to 0.

numbers · 3d · loop

Percentage Counter Animation

A percentage counts from 0 to 100 while a bar fills beside it on the same easing, then the label flips to Complete. The number is a registered integer printed through a CSS counter.

numbers · one-shot

Star Rating Counter

A review score counts from 0.0 to 4.9 while five stars fill to match. One integer is animated; the whole and tenths digits are derived from it by two more registered integers.

numbers · one-shot

Countdown Number Animation

Counts down from 10 to 0 with a punch on every tick, then GO! bursts in and stays. The tick length is one variable; the number is a registered integer stepped with steps().

numbers · playful · one-shot

Seven Segment Digital Clock

An LED clock drawn from real seven-segment digits, seconds ticking and the colons blinking. Each segment reads a ten-cell color strip, so any digit is just --d: 0 to 9 on the element.

numbers · retro · glow · loop

Slot Machine Number Animation

Three reels spin with motion blur and stop one after another, each overshooting a touch before it settles on 7, then JACKPOT fades in. Each reel is a digit strip with its own duration.

numbers · playful · blur · one-shot

Animated Price Counter

A pricing-table price counts up to $49 while the cents spin through their digits and land on .99. Dollars and cents are two registered integers; the cents pad to two digits with a counter style.

numbers · one-shot

Stats Counter Animation

Three stats count up one after another, and each suffix (+, %) pops in once its number lands. One keyframe serves all three: every stat passes its target in --to and its order in --i.

numbers · one-shot

Year Counter Timeline

A marker hops along a timeline from 2020 to 2026, pausing on each tick while the year in its bubble changes. One registered number drives both the marker and the filled line.

numbers · one-shot

Views Counter Animation

A view count ticks up to 999 and then rolls over: the digits slide out the top and 1K views springs up from below. Useful for social posts and video stats. One integer, two pseudo-elements.

numbers · playful · one-shot

Circular Countdown Timer

A ring drains over ten seconds while the number inside counts down, and both turn red for the final three. The ring is an SVG circle with pathLength 100, so the dash math is just 0 to 100.

numbers · loop

Stopwatch Timer Animation

A running stopwatch: minutes and seconds tick while the hundredths blur past, and the hand on the icon jumps once a second. Three registered integers, each stepped at its own speed.

numbers · loop

Launch Countdown Timer

The launch-page countdown: days, hours, minutes and seconds in boxes, with each new second dropping into place. Seconds and minutes are registered integers stepped down with steps(60).

numbers · loop

Stock Ticker Animation

A market ticker tape: symbols, prices and green or red changes with arrows glide past on a thin band. The tape is a two-copy marquee, so it can hold any number of quotes without a seam.

numbers · loop

Score Counter with +10 Pop

A game score takes five hits: each time a +10 floats up and fades while the total punches up by ten. The score is a registered integer stepped with steps(5, start) in time with the pops.

numbers · playful · one-shot

Binary Counter Animation

Eight bits count upward in binary, each one flipping at half the speed of its right-hand neighbor, with the decimal value beside them. Every bit is one keyframe whose duration doubles.

numbers · retro · loop

Calendar Date Flip Animation

A tear-off desk calendar: every page lifts off the top and flips away, uncovering the next date and weekday. Day and weekday are counters over one integer, each with its own cyclic @counter-style.

numbers · 3d · loop

Elevator Floor Indicator

An elevator display rides up from floor 1 to 6 and back, the number sliding in from the direction of travel with a lit up or down arrow. One strip of floors, moved by generated keyframes.

numbers · retro · loop

Live Price Ticker Text

A live quote that ticks every second, flashing green when the price rises and red when it falls, with a matching arrow. The six prices, colors and arrows all come from generated keyframes.

numbers · loop

Dice Roll Animation

A die drops in tumbling, bounces twice with a squash on landing, and flickers through faces before it settles on five. Pips read a six-cell color strip, so a face is just a number.

numbers · playful · one-shot

Type Specimen Weight Cycle

A specimen card: Aa sweeps from hairline thin to black while a live readout counts the weight from 100 to 900 and a slider tracks it. One registered integer drives the font, the counter and the knob.

numbers · subtle · loop

Revenue Stat Count Up

A $1.2M ARR stat rolls up from $0.0M with the tenths spinning past, a +38% chip springs in and a sparkline draws beneath. Digit strips and an SVG path with pathLength 100.

numbers · loop

Live Visitor Counter

A live pill says 1,284 viewing now: a green dot pings while the last two digits roll up or down to each new count, like a real-time analytics badge. Pure CSS digit strips and keyframes.

numbers · subtle · loop

Mechanical Odometer Rolling Digits

A dashboard odometer: the red tenths drum turns nonstop and each full turn carries into the next drum, with shaded cylinders. Every drum is a digit strip with its own timed roll.

numbers · retro · 3d · loop

Pomodoro Focus Timer

A focus timer counts down from 24:59 in mm:ss, every digit rolling down into place as the second turns, with a Focus chip and session dots. Four digit strips on 10s, 60s and 600s loops.

numbers · subtle · loop

Live Scoreboard Score Change

A broadcast score bug: the home score rolls from 102 to 105 with a +3 pop and a sweep of team color, then the away side scores two. Digit strips, one shared timeline, own dark panel.

numbers · loop

Rolling Price Change Up and Down

A stock price whose digits roll up in green when it rises and down in red when it falls, with the change chip swapping in to match. Each column rolls in the direction the price moved.

numbers · loop

Battery Charging Percentage

A battery fills from 8% to 100% while the percentage climbs beside it, red turning to your color, with a light sweep across the charge and Charged at the top. One registered integer drives all of it.

numbers · loop

T-Minus Launch Countdown

A mission clock counts T-00:00:10 down to zero as ten segments go dark one by one, then flips to T+ with all segments lit and Liftoff in your color. One inherited integer drives the clock and the bar.

numbers · cinematic · loop

Version Number Bump

A package version rolls from v2.4.9 to v2.5.0, then v2.5.1, then spins up to v3.0.0, each with a minor, patch or major tag springing in. Three digit strips that each roll forward.

numbers · playful · loop

Race Lap Timer with Sectors

A race timing tower: the lap clock runs from 1:18 to 1:23.46 and stops, sector bars fill and turn purple, green and yellow, and a green -0.21 delta lands. Two registered integers print the time.

numbers · loop

Windows 95 Copy Dialog

A Windows 95 copy dialog: a page flies between folders while the block progress bar fills chunk by chunk and the seconds left count down. Crisp 1px bevels from inset box-shadows, no images.

retro · numbers · loop

BIOS Memory Test Boot Text

A green phosphor BIOS screen counts the memory test up to 65536K OK, then prints the drive check and Press DEL with a blinking cursor, under scanlines, glow and curved corners. One stepped integer.

retro · numbers · typing · glow · loop

VHS Camcorder REC Timestamp

A camcorder viewfinder: REC blinks in red, the date sits in the corner and the clock ticks every second, while a tracking band rolls through and jolts the OSD. A stepped integer and gradients.

retro · numbers · glitch · loop

Teletext Page Text

A teletext set hunts through pages 284 to 300, then the SPORT page paints in row by row with a double-height headline, while the header clock ticks. Monospace text and stepped integers.

retro · numbers · loop

Arcade Continue Countdown

An arcade CONTINUE? screen: a chunky pixel digit counts 9 down to 0, popping on every tick, then GAME OVER blinks in. The digit is a 5 by 7 bitmap grid where each pixel reads its own on and off strip.

retro · numbers · playful · loop

Nixie Tube Counter

Four nixie tubes glow orange behind a fine mesh, with the unlit cathodes faint behind, then flicker through digits and land on a new number, tube by tube. One stepped integer per tube.

retro · numbers · glow · loop

How to use these number animations

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required. Classes are prefixed per effect so several can share a page.

To change the color, set --txt-color on the element or any ancestor. To change the size, set --txt-size: offsets, shadows and letter spacing are all in em, so they follow the font size.

One-shot effects such as the typewriter and the reveals play when the element appears. To trigger them later, add the class when you need it, or toggle animation-play-state.

Every snippet ships with a prefers-reduced-motion rule that jumps straight to the finished state for people who asked their OS for less motion, so the text is always readable.