AI CSS Animations

CSS Text Animations

31 copy-paste text effects: typewriters, glitches, gradients, reveals and loops. Each one is a single HTML + CSS snippet with no JavaScript, recolored and resized with two variables.

Typewriter Effect

Text types itself out one character at a time behind a blinking caret. Pure CSS: the width steps up one character per frame using ch units, so set the step count to your text's length.

typing · reveal · one-shot

Type and Delete Loop

Types the phrase, pauses, deletes it and starts again, forever. Uses the same ch-based width trick with an alternating animation, so no JavaScript is needed for the delete phase.

typing · loop

Text with Blinking Cursor

A static line of text followed by a block cursor that blinks, as at a terminal prompt. Pairs with any typing effect, or stands alone as a 'waiting for input' cue.

typing · loop · minimal

Glitch Text

The classic RGB-split glitch: two offset copies of the text in cyan and magenta flicker through random clip-path slices. The copies read from a data attribute, so the markup is one element.

glitch · loop · dark

Neon Flicker Text

Glowing text that flickers like a neon tube with a loose connection. Layered text-shadows make the glow and a few sharp dips in opacity make the flicker. Best on dark backgrounds.

neon · glow · loop · dark

Outline to Fill Text

Hollow, stroked letters slowly fill with color and empty again. Uses text-stroke for the outline and animates the fill color, so it works with any font.

stroke · loop

Animated Gradient Text

A gradient flows through the letters, clipped to the text. The second and third colors are mixed from your accent, so changing one variable retints the whole gradient.

gradient · loop · tailwind

Rainbow Text

A full-spectrum rainbow cycles through the text. Fixed colors rather than your accent, on purpose: this one is for playful moments, not brand moments.

gradient · loop · colorful

Shimmer Text

A bright band sweeps across otherwise muted text, like light on brushed metal. The same idea AI chat apps use for their 'Thinking' status line.

shine · loop · subtle

Highlighter Sweep

A translucent highlighter stroke draws in behind the words after a short delay, as if someone marked the important line. Plays once, then stays.

reveal · one-shot · subtle

Fade In Up

The text rises a little as it fades in. The most useful entrance animation there is: quiet, quick, and appropriate for headings, captions and anything that appears on load.

reveal · one-shot · subtle

Blur In

The text comes into focus from a heavy blur. A filter transition that feels like a camera pulling focus; keep it under a second or it reads as slow.

reveal · one-shot

Tracking In

Letters start spread far apart and slide together as they fade in. Animating letter-spacing gives it a cinematic title-card feel.

reveal · one-shot · cinematic

Letters Rise

Each letter rises and fades in a beat after the previous one. Every span carries its index in a custom property, so the delay is one calc() and adding letters needs no new CSS.

reveal · one-shot · letters

Letters Pop In

Letters pop in from nothing with a springy overshoot, one after another. The overshoot comes from a cubic-bezier that goes past 1, so no keyframe juggling is needed.

reveal · one-shot · letters · playful

Flip In

The line swings down into place from a 90-degree tilt, with perspective. Set the transform origin to the top so it hinges like a sign being lowered.

reveal · one-shot · 3d

Pop In

The whole word scales up from half size with a little overshoot, like a notification badge appearing. One keyframe and a springy easing curve.

reveal · one-shot · playful

Wipe Reveal

The text is uncovered from left to right, as if a curtain were drawn back. A clip-path inset animation, so the text never moves; only what you can see of it changes.

reveal · one-shot · cinematic

Block Swipe Reveal

A solid bar in the accent color sweeps across, and the text is there when it passes. Two animations: the bar scales in from the left then out to the right, and the text appears mid-sweep.

reveal · one-shot · cinematic

Line Mask Reveal

Each line slides up out of an invisible mask, one after another, the way editorial sites reveal headlines. Every line is a clipping wrapper around a moving inner span.

reveal · one-shot · cinematic

Stroke Draw Text

The outline of each letter draws itself, then the fill fades in. This one is SVG text with an animated stroke dash, which is the only way to 'draw' letters without JavaScript.

stroke · one-shot · svg

Wave Text

The letters ride a wave, each one rising a beat after its neighbor. The delay comes from the per-letter index, so any word works without touching the CSS.

loop · letters · playful

Scrolling Marquee

Text scrolls endlessly from right to left with no seam. The trick is two copies of the content moving together by exactly one copy's width, so the loop point is invisible.

loop · scroll

Rotating Words

One word in a sentence cycles through alternatives, each sliding up to replace the last. The list ends with a repeat of the first word so the loop closes without a jump.

loop · reveal

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

Blinking Text

Text that switches on and off, hard, with no fade. Use it sparingly and only for things that genuinely need attention, like a live indicator or a recording light.

loop · minimal

Breathing Long Shadow

A stacked, stepped shadow gives the text a chunky 3D look, and the shadow slowly extends and retracts as if the light were moving. Retro poster energy.

loop · 3d · retro

Jello Wobble

The word wobbles like jelly, skewing back and forth with decreasing force before settling. A loop with a long pause, so it draws the eye without becoming annoying.

loop · playful

Shake Text

A quick horizontal shake, the universal 'no' for a wrong password or invalid form field. Plays once here; in your app, add the class when validation fails.

one-shot · feedback

Floating Text

Text drifts gently up and down, like it is floating on water. Slow and small: a few pixels over three seconds is plenty to make a hero heading feel alive.

loop · subtle

Pulse Text

The text swells and relaxes on a slow beat. A single scale keyframe; use it on a call to action you want people to notice without moving anything across the screen.

loop · subtle · tailwind

How to use these text 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.

Frequently asked questions

How do I make a typewriter effect in pure CSS?

Put the text in an element with white-space: nowrap and overflow: hidden, then animate its width from 0 to the text length in ch units using steps(). A blinking border-right plays the caret. The typewriter entry above is the complete snippet.

How do I animate gradient text in CSS?

Apply a gradient as the background, clip it to the text with background-clip: text and a transparent color, then animate background-position with a background-size larger than the element. The gradient and rainbow entries show both a brand-colored and a full-spectrum version.

How do I animate text letter by letter?

Wrap each letter in a span and give each one an index in a custom property, such as style="--i: 3". The animation delay is then calc(var(--i) * 60ms), so one keyframe animates any word. The letters rise, letters pop and wave entries use this.

Can text animations run without JavaScript?

Every entry in this directory is CSS only, including the counting number, which uses a registered custom property and a CSS counter. JavaScript is only needed if you want to start an effect on scroll or on a click, in which case you add the class at that moment.

Are these text animations accessible?

The text stays real text, so screen readers and search engines read it normally. Each snippet includes a prefers-reduced-motion rule that skips to the finished state. Use blinking and glitch effects sparingly, and never for body copy.